Разнообразие новых свойств CSS3 принимает бесконечные наборы значений, например box-shadow
и градиент фона.
Принимая box-shadow
в качестве примера, в идеале можно уметь:
@include box-shadow(10px 15px 10px #FF0000, 15px 10px 10px #0000FF);
Столько параметров, сколько хотите.Проблема заключается в том, что Sass требует определенного количества параметров, и даже если бы этого не произошло, я не знаю средств для их циклического повторения.
Лучший миксин, который я могу придумать, будет выглядеть так:
@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;
}
}
Я пытаюсь написать набор CSS3-миксеров для поставщиков продуктов Sass.(Доступно по адресу: https://github.com/stevelacey/sass-css3-mixins).
Очевидно, что это мусор, длинный и ограничен 5 стилями, есть ли лучший способ?
Редактировать:
@ Riklomas указал мне на это: https://gist.github.com/601806, который по крайней мере менее повторяется, чем мой код, все еще ищет правильное решение.