具有特定值的SASS Mixin参数

Question

有什么方法可以检查mixins中的参数。 例如，我有一个阴影混合器，想以不同的方式包含（称为）阴影。

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