具有特定值的SASS Mixin参数

时间:2018-10-29 09:01:51

标签: css sass

有什么方法可以检查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`

1 个答案:

答案 0 :(得分: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;
}