我正在尝试编写循环混合,以迭代方式增加背景颜色的饱和度。这是最新的混合代码:
@mixin generateBackgroundSteps($cell-count, $color) {
@for $i from 0 through $cell-count - 1 {
$percent: (5 * $i) + "%";
$new-color: saturate($color, $percent);
&[setting-id="#{$i}"] {
background-color: $new-color;
}
}
}
无论我如何更改它,生成的 css 仍然看起来像这样:
.rubric-design .rubric .create-new-criteria .create-criteria-initial-
settings .create-criteria-setting[setting-id="2"] {
background-color: saturate(#90afc8);
}
也许这就是我形成 $percent 的方式。这一定很明显!
最佳答案
尝试使用 percentage
函数。
percentage SCSS中的函数
$percent: percentage((5 * $i) / (5 * $cell-count));
@mixin generateBackgroundSteps($cell-count, $color) {
@for $i from 0 through $cell-count - 1 {
$percent: percentage((5 * $i) / (5 *$cell-count));
$new-color: saturate($color, $percent);
&[setting-id="#{$i}"] {
background-color: $new-color;
}
}
}
关于css - 使用 sass mixin 增加色彩饱和度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45216364/