css - 具有特定值的 SASS Mixin 参数

Question

有什么方法可以检查 mixins 中的参数。例如，我有一个 shadow mixin，并希望在其参数的情况下以不同的方式包含它(调用它)。

@mixin shadow($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;
}