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个类中的一个，该类控制列表项的颜色和图标。

我的变量示例：

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

我对列表项的看法如下：

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感到满意，因为它只假设你有一个盒子阴影，但属性允许倍数。

从长远来看，如果你可以循环使用你想要的值并调用更强大的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));
        }
    }
}

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

1 个答案: