如何使用SASS获得CSS输出（如下所示）？ 因为我不想写这么长的代码。
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
hsl(0, 100%, 50%),
hsl(10, 100%, 50%),
hsl(20, 100%, 50%),
hsl(30, 100%, 50%),
hsl(40, 100%, 50%),
hsl(50, 100%, 50%),
hsl(60, 100%, 50%),
hsl(70, 100%, 50%),
hsl(80, 100%, 50%),
hsl(90, 100%, 50%),
hsl(100, 100%, 50%),
hsl(110, 100%, 50%),
hsl(120, 100%, 50%),
hsl(130, 100%, 50%),
hsl(140, 100%, 50%),
...
...
hsl(360, 100%, 50%)
);
}
您可以使用@for循环来帮助您处理这种情况。
您将创建一个空字符串。
然后通过一次串联一行来填充该字符串。 hsl（x，100%，50%），
然后在规则中使用该变量。
$colors : '';
@for $i from 0 through 36 {
@if ($i == 36) {
$colors : $colors + 'hsl(' + 10 * $i + ', 100%, 50%)' // Don't add the ',' if $i == 36, the last item
}
@else {
$colors : $colors + 'hsl(' + 10 * $i + ', 100%, 50%),'
}
}
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
#{$colors}
);
}
