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
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
@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, , , , , .