将sass列表传递给具有多个参数的mixin [英] Pass sass list to mixin with multiple arguments

问题描述

我试图创建一个sass mixin，将一个列表中不确定数量的项作为混合中的参数。

I'm trying to create a sass mixin that will take an undetermined number of items in a list as arguments in a mixin.

最终目标是有一个mixin，可以用来为进度条设置不同值的颜色样式（当条形值为低值时，红色）。这里是我想出的mixin：

The end goal is to have a mixin that can be used to style the colors of different values for a progress bar (i.e. red when the bar has a low value). Here's what I came up with for the mixin:

@mixin progress-value($value..., $color...) {

    progress[value="#{$value}"] { 
        color: #{$color}; 

        &::-webkit-progress-value { background-color:  #{$color}; }
        &::-moz-progress-bar { background-color: #{$color}; }
    }   
}

// Calling the mixin
@include progress-value("0.25, #de2b23", "0.5, #FF8330", "0.75, #8A9F4A", "1, #14BB64");

我知道这是一个我正在使用include的列表，但我不知道打破这个列表，并将其传递给每个参数，或者如果这甚至是最好的方式去。

I know this is a list I'm using with the include, but I'm not sure how to break that list up and pass it to each argument, or if this is even the best way to go.

我可以创建一个更简单的mixin版本，并为每个被设置的值调用它，但是看起来不是很干。

I could create a simpler version of the mixin and call it for each value being styled, but that didn't seem very DRY.

感谢您的帮助！

推荐答案

您可以尝试这样：

@mixin make_progress($val,$col){
  progress[value="#{$val}"] {
    color: #{$col};
    &::-webkit-progress-value { background-color:  #{$col}; }
    &::-moz-progress-bar { background-color: #{$col}; }
  }  
}

@mixin progress-value($value-color...) {
    @each $progress in $value-color {
      @include make_progress(nth($progress,1),nth($progress,2));
    }
}

// Calling the mixin
@include progress-value(0.25 #de2b23);
// and with a multideimensional list
@include progress-value(0.5 #FF8330, 0.75 #8A9F4A, 1 #14BB64);

如果您以逗号的空格分隔的对 - 值/颜色，就像我在上面的例子中做的那样，或者以其他方式清楚说明您的参数列表是多维双括号：

This will work now if you pass the parameters as a comma separated list of space separated pairs - value/color, like I did in the above example, or in some other way make clear that your list of parameters is multidimensional - like including each passed pair in parentheses:

// with a single parameter
@include progress-value((0.25, #de2b23));
// or with multiple parameters
@include progress-value((0.5, #FF8330), (0.75, #8A9F4A), (1, #14BB64));

我还制作了一个单独的mixin make_progress 为了更好的概述，如果你想调用它在循环以外的其他一些实例，但你可以很容易地把这个循环内。

I also made a separate mixin make_progress, for a better overview, and in case you would want to call it in some other instance outside the loop, but you could easily leave that inside the loop.

这篇关于将sass列表传递给具有多个参数的mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！