3

各种新的 CSS3 属性接受无限的值集，即box-shadow背景渐变。

举box-shadow个例子，理想情况下应该能够做到：

@include box-shadow(10px 15px 10px #FF0000, 15px 10px 10px #0000FF);

任意数量的参数。问题是 Sass 需要确定数量的参数，即使不需要，我也不知道循环它们的方法。

到目前为止，我能想到的最好的 mixin 是这样的：

@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;
  }
}

我正在尝试编写一组 Sass 供应商提供的 CSS3 mixin。（可在：https ://github.com/stevelacey/sass-css3-mixins 获得）。

显然，这是垃圾，冗长且仅限5种样式，有没有更好的方法？

编辑：

@Riklomas 向我指出了这一点：https ://gist.github.com/601806至少比我的代码少重复，仍在寻找合适的解决方案。

4

3 回答 3

7

嗨，我是 Sass Core 团队的成员。我希望将来在 sass 中添加一个 var-args 功能，但目前还不可能。

于 2011-05-31T22:54:55.257 回答
3

使用 SASS 3.2，您现在可以使用这样的 mixin：

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

资源

于 2013-06-01T14:52:45.320 回答
-3

简而言之，没有。

但是我不必再关心这个了，指南针很好地包装了类似于上面的东西。

于 2011-02-26T21:11:10.813 回答