我想为 box-shadow 属性创建一个 Sass mixin，但遇到了一些麻烦。一些现有的代码看起来像这样。
#someDiv {
-moz-box-shadow:0 0 5px rgba(0,0,0,.25);
}
#someOtherDiv {
-moz-box-shadow:0 0 5px rgba(0,0,0,.25) inset;
}
#theLastDiv {
-moz-box-shadow: 0 0 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2) inset;
}
试图将所有这些整合到 1 个 mixin 中变得有问题。在 mixins 中使用逻辑的文档非常少。
我想按照以下方式创建一些mixin：
@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false) {
@if $inset == true {
-moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue) inset;
} @else {
-moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);
}
}
这是抛出错误，因为我猜 Sass 无法评估 $inset 变量。
前面的示例仅演示了我在 box-shadow 是否插入时遇到的问题。我遇到的另一个问题是在单个元素上声明了多个框阴影。如需参考，请参阅上述#theLastDiv。
@mixin boxShadow($declarations : 2, $xOffSet1, $yOffSet1, $blur1, $red1, $green1, $blue1, $opacity1 $xOffSet2, $yOffSet2, $blur2, $red2, $green2, $blue2, $opacity2) {
@if $declarations == 1 {
-moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue);
} @else if $declarations == 2 {
-moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$green1,$blue1), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2);
}
有时一个元素有一个盒子阴影，而其他时候它必须分开盒子阴影。我误会了，Sass 缺乏破译这种逻辑的能力，并且要实现这一点需要单独的 Mixins（一个用于具有一个框阴影的元素，另一个用于具有两个框阴影的 mixins）。
更复杂的是，上述不透明问题是如何影响这一点的？很想得到一些反馈。如果我弄错了，或者我思考问题的方式总体上存在缺陷，请告诉我。谢谢！