我正在尝试创建一个 sass mixin,它将列表中不确定数量的项目作为 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 版本,并为每个样式值调用它,但这看起来不太干燥。
你可以尝试这样的事情:
@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分隔对 - 值/颜色,就像我在上面的示例中所做的那样,或者以其他方式明确您的参数列表是多维的- 就像将每个传递的对包含在括号中:
// 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));
我还做了一个单独的 mixinmake_progress
,为了更好地概述,并且如果您想在循环之外的其他实例中调用它,但您可以轻松地将其保留在循环内。
DEMO
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)