具有特定值的 SASS Mixin 参数

Question

有什么方法可以检查 mixins 中的参数。 例如，我有一个 shadow mixin，并且想以不同的方式包含它（调用它）以防它的参数。

@mixin 阴影($shadow, $position, $color) { ...... }

如果我通过 Top2 它应该只改变第一个参数

.box { @include shadow(inset, Top2, #000); } => `box-shadow: inset, 2px 0 0 0, #000`

如果我通过 Bottom2 它应该将参数更改为 -2px

.box { @include shadow(inset, Bottom2, #000); } => `box-shadow: inset, -2px 0 0 0, #000`

Answer 1

我认为你应该使用这种类型。

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