使用Sass mixin增加颜色饱和度

Question

使用Sass mixin增加颜色饱和度

3

我正在尝试编写一个循环的mixin，用于迭代地增加背景颜色的饱和度。以下是最新的mixin代码：

@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的方式有问题，一定是某些显而易见的错误！

- webhound

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yogen Darji · Accepted Answer

尝试使用percentage函数。

在SCSS中，percentage函数。

$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;                
    }
 }
}