将变量传递给 sass mixin 以包含多个属性

Question

我有一个用于 box-shadow 的 sass mixin，如下所示：

@mixin box-shadow($hLength, $vLength, $blur, $spread, $colour, $type:""){
     @if $type != "" {
        -webkit-box-shadow:$type $hLength $vLength $blur $spread $colour;
        -moz-box-shadow:$type $hLength $vLength $blur $spread $colour;
        box-shadow:$type $hLength $vLength $blur $spread $colour;
    }
}

这对我的大部分应用程序都很好。

但是我现在需要以某种方式修改我的方法。

我有可以有 11 个类之一的列表项，这个类控制列表项的颜色和图标。

我的变量示例：

$channel1:     #19BC9C;
$channel2:     #F1C40E;
$channel3:     #9B59B6;
$channel4:     #3398DB;

我对列表项的 sass 如下所示：

li {

   &.channel1 {
      @include box-shadow(-3px, 0px, 0px, 0px, $channel1, inset);
   }

   &.channel2 {
      @include box-shadow(-3px, 0px, 0px, 0px, $channel2, inset);
   }
}

问题是每个类元素的 px 值和 inset 都是相同的。但是 box-shadow-color 没有属性，所以我不能拆分参数。

我希望我可以将 -3px、0px、0px、0px 存储在一个单独的变量中并将其传入。

@include box-shadow($channelBorder, $channel1, inset); 等，但这不起作用。

有谁知道是否有一个像样的解决方案，我宁愿尽可能保持我的 mixin 不变。

Answer 1

通常可以通过在 mixin 上使用默认值并仅指定您希望修改的确切值来解决此问题：

$default-hLength: -3px !default;
$default-vLength: 0 !default;
$default-blur: 0 !default;
$default-spread: null !default;
$default-colour: null !default;
$default-type: null !default;

@mixin box-shadow($hLength: $default-hLength, $vLength: $default-vLength, $blur: $default-blur, $spread: $default-spread, $colour: $default-colour, $type: $default-type){
    -webkit-box-shadow: $type $hLength $vLength $blur $spread $colour;
    -moz-box-shadow: $type $hLength $vLength $blur $spread $colour;
    box-shadow: $type $hLength $vLength $blur $spread $colour;
}

li {

   &.channel1 {
      @include box-shadow($colour: $channel1, $type: inset);
   }

   &.channel2 {
      @include box-shadow($colour: $channel2, $type: inset);
   }
}

或者，您可以将部分参数存储为列表，并在调用 mixin 时扩展它们：

li {
    $vals1: -3px 0 0 0;
    $vals3: -3px 0 0 0 black inset;
    &.channel1 {
        // option 1
        @include box-shadow($vals1..., $colour: $channel1, $type: inset);
        // option 2
        @include box-shadow(join($vals1, ($channel1, inset))...);
        // option 3
        @include box-shadow(set-nth($vals3, 5, $channel1)...);
    }

    &.channel2 {
        // option 1
        @include box-shadow($vals1..., $colour: $channel2, $type: inset);
        // option 2
        @include box-shadow(join($vals1, ($channel2, inset))...);
        // option 3
        @include box-shadow(set-nth($vals3, 5, $channel2)...);
    }
}

---

但是，您永远不会对这样的 mixin 感到满意，因为它只假设您将拥有一个 box-shadow，但该属性允许多个。

如果您可以遍历所需的值并调用更健壮的 mixin，从长远来看，这对您来说会简单得多：

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

li {
    $colours: $channel1, $channel2, $channel3, $channel4;

    @for $i from 1 through length($colours) {
        &.channel#{$i} {
            @include box-shadow(inset -3px 0 0 0 nth($colours, $i));
        }
    }
}