CODEWITHSUNDEEP
csssassmixins
Steve
Steve

Reputation: 5853

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.

Upvotes: 3

Views: 1249

Answers (3)

Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5132

With SASS 3.2 you can now use mixins that work like this:

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

source

Upvotes: 3

chriseppstein
chriseppstein

Reputation: 10613

Hi I'm a member of the Sass Core team. I hope to add a var-args feature to sass in the future, but it is not currently possible.

Upvotes: 7

Steve
Steve

Reputation: 5853

In short, no.

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

Upvotes: -3

Related Questions