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 o开发者_如何转开发f 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.
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.
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
In short, no.
But I don't have to care about this anymore, Compass wraps up something similar to the above rather nicely.
精彩评论