Ste*_*eve 3 css sass mixins css3
各种新的CSS3属性接受无限的值集,即box-shadow
背景渐变.
以box-shadow
为例,理想的情况是应该能够做到:
@include box-shadow(10px 15px 10px #FF0000, 15px 10px 10px #0000FF);
Run Code Online (Sandbox Code Playgroud)
尽可能多的参数.问题是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;
}
}
Run Code Online (Sandbox Code Playgroud)
我正在尝试编写一套Sass供应商的CSS3 mixins.(见:https://github.com/stevelacey/sass-css3-mixins).
显然,这是垃圾,冗长,限于5种风格,有没有更好的方法?
编辑:
@Riklomas向我指出:https://gist.github.com/601806 ,它至少比我的代码重复性,仍在寻找合适的解决方案.
归档时间: |
|
查看次数: |
1186 次 |
最近记录: |