Geek asks and answers

Generic @mixin for Sass with lots and lots of meanings

How to create a common @mixin in sass for several semicolons ,, and now the user may not know how many values ​​each of the mixin elements will have?

The user may want to put one shadow in some case and there may be 5 shadows in a different css style and with different values.

What is the best approach or do we have a choice?

text-shadow: 0 0 5pt white,
                0 0 6pt white,
                0 0 7pt white,
                0 0 8pt white,
                0 0 9pt white,
                0 0 10pt white,
                0 0 11pt white,
                0 0 12pt white,
                0 0 13pt white,
                0 0 14pt white,
                0 0 15pt white,
                0 0 16pt white,
                0 0 17pt white,
                0 0 18pt white,
                0 0 19pt white;

I need to have something like this:

@mixin textShadow($h-shadow:$baseUnit * 0, $v-shadow:$baseUnit * 0, $blur:$baseUnit * 2, $color:white)
+1
source share
1 answer

From the official documentation:

Sass " ", mixin, . , .... :

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
+3

More articles:


All Articles