Is there a way to get an array of parameters passed to Sass mixin?

The various new CSS3 properties accept endless sets of values, i.e. box-shadowand background gradient.

Taking box-shadowas an example, ideally should be able to:

@include box-shadow(10px 15px 10px #FF0000, 15px 10px 10px #0000FF);

As many options as you like. The problem is that Sass requires a certain number of parameters, and even if it is not, I don’t know how to iterate over them.

The best mix I can think of so far is this:

@mixin box-shadow($v1: 0 0 10px #CCC, $v2: "", $v3: "", $v4: "", $v5: "") {
  @if $v5 != "" {
    -webkit-box-shadow: $v1, $v2, $v3, $v4, $v5;
    -moz-box-shadow: $v1, $v2, $v3, $v4, $v5;
    -o-box-shadow: $v1, $v2, $v3, $v4, $v5;
    box-shadow: $v1, $v2, $v3, $v4, $v5;
  } @else if $v4 != "" {
    ...
  } @else {
    -webkit-box-shadow: $v1;
    -moz-box-shadow: $v1;
    -o-box-shadow: $v1;
    box-shadow: $v1;
  }
}

I am trying to write a set of CSS3 SAS compilers with vendor support. (Available at https://github.com/stevelacey/sass-css3-mixins ).

Obviously this is trash, long lasting and limited to 5 styles, is there a better way?


Edit:

@ : https://gist.github.com/601806, , , , , .

+3
3

, .

, Compass - .

-3

Sass Core. var-args sass , .

+7

With SASS 3.2, you can now use mixins, which work as follows:

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

source

+3
source

Source: https://habr.com/ru/post/1792281/


All Articles