如何解决这个 sass 插值问题

Question

警告：您可能不是要在这里插值中使用颜色值白色。它可能最终表示为白色，这可能会产生无效的 CSS。将颜色名称用作字符串或映射键（例如，“白色”）时，请始终引用颜色名称。如果你真的想在这里使用颜色值，使用'"" + $colorName'。

   ?
93 ?       .text-#{$colorName}-#{$shade} {
   ?               ^^^^^^^^^^
   ?
    src\assets\styles\scss\_palette.scss 93:15  @import
    stdin 44:9  

我按照推荐尝试了这样的事情，

.text-#{'"" + $colorName'}-#{$shade} {

但是仅仅添加引号是行不通的。我正在使用角度 cli。

Answer 1

最近升级到Angular9并面临同样的问题。在我的情况下更新这个

.#{$colorName}#{$hue}-bg {
        background-color: $color !important;
}

到

.#{"" + $colorName}#{$hue}-bg {
        background-color: $color !important;
}

工作。

Answer 2

在 GitHub 问题 ( https://github.com/sass/libsass/issues/2409#issuecomment-311932161 ) 中找到这篇文章。根本问题是未加引号的映射键。

（感谢@xzyfer。）

$testMap: (
-    white: (color: white) // white is a Color object
+    "white": (color: white) // "white" is a String object
);

@each $key in map-keys($testMap) {
    .test-btn-#{$key} {
        $colors: map_get($testMap, $key);

        color: map-get($colors, color);
    }
}

Answer 3

这应该处理警告：

#{'.text-' + $colorName + '-' + $shade}