Sass mix() 函数给出了有效颜色值的错误

Question

_主题-var.scss

//color palette
$colors:(
    "primary":#ff0000,
    "secondary":#898989,
    "dark":#360000,
    "light":#ffaeae,
    "white":#fff
);

style.scss

@import "./theme-var";

@each $key,$val in $colors{
    .text-#{$key}-color{
        color: $val;
    }
    .bg-#{$key}-color{
        background-color:$val;
    }

    @for $i from 1 through 9{
        .text-#{$key}-color-light-#{$i}{
            color: mix(#ffff, #{$val},$i*10); // getting error for this line 
        }
    }
}

错误它说 mix($color-1, $color-2, $weight: 50%) 的参数 $color-1 必须是颜色，我正在传递颜色并且 $val 包含有效的 hax 颜色可能是错误的原因是什么？ 错误屏幕截图

Answer 1

您需要删除 #{$val} 上的插值。该变量已经是一种颜色，插值似乎将其转换为其他颜色，这就是您收到此错误的原因。

@for $i from 1 through 9 {
    .text-#{$key}-color-light-#{$i}{
        color: mix(#ffff, $val, $i*10);
    }
}

Sass mix() 函数给出了有效颜色值的错误

Sass mix() function is giving error with valid color values

sass