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

Question

我有一个 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 个 class 之一，这个 class 控制列表项的颜色和图标。

我的变量示例：

$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);
   }
}

问题是每个 class 元素的 px 值和插图都相同。但是，box-shadow-color 没有属性，所以我无法拆分参数。

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

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

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

Answer 1

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

$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);
   }
}

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

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($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));
        }
    }
}

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

Pass variable to sass mixin to contain multiple properties

css

variables

sass

mixins