将变量传递给sass mixin以包含多个属性-Java 学习之路

我有一个用于盒子阴影的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值和插入是相同的 . 但是没有box-shadow-color的属性，所以我无法拆分参数 .

我希望我能在一个单独的变量中存储-3px，0px，0px，0px并将其传入 .

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

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

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

回复于 2024-05-07T00:47:51+08:00

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

1 回答

相关问题