将SASS列表通过多个参数混合

Question

我正在尝试创建一个sass mixin，该混合物将在列表中以列表中的数量作为Mixin中的参数。

中的参数。

最终目标是拥有一个混合蛋白，该混合蛋白可用于为进度栏的不同值的颜色设计（即，当栏的值较低时红色）。这是我为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");

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

我可以创建一个更简单的Mixin版本，并将其称为每个值的样式，但这似乎并不是很干。

Answer 1

您可以尝试这样的事情：

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

如果您将参数作为 comma 分开的 space> space 分离的对 - 值/颜色的分离列表，就像我在上面的示例中所做的那样，或者在另一种方法可以清楚地表明您的参数列表是多维 - 喜欢在括号中包括每个传递的对：

// 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，以获得更好的概述，以防万一您想在循环外的其他实例中调用它，但是您可以轻松地将其放在循环中。

demo