Search code examples
csssassmixins

Is there a means of getting an array of the parameters passed to a Sass mixin?

A variety of the new CSS3 properties accept infinite sets of values i.e. box-shadow and background gradient.

Taking box-shadow as an example, ideally one should be able to do:

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

As many parameters as you like. The issue is that Sass demands a definitive number of parameters, and even if it didn't, I know of no means of looping over them.

The best mixin I can think of thus far would be like so:

@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'm trying to write a set of Sass vendor-catering CSS3 mixins. (Available at: https://github.com/stevelacey/sass-css3-mixins).

Obviously, this is rubbish, lengthy and limited to 5 styles, is there a better way?

Edit:

@Riklomas has pointed me to this: https://gist.github.com/601806 which is at least less repetitive than my code, still looking for a proper solution.

Solution

  • In short, no.

    But I don't have to care about this anymore, Compass wraps up something similar to the above rather nicely.