我如何解决这个sass插值问题

Question

警告：您可能无意在此处的插值中使用颜色值白色。 它最终可能会表示为白色，这可能会产生无效的 CSS。 将颜色名称用作字符串或映射键(例如，"白色")时，请始终引用颜色名称。 如果您确实想在此处使用颜色值，请使用"" + $colorName"。

╷
93 │       .text-#{$colorName}-#{$shade} {
│               ^^^^^^^^^^
╵
srcassetsstylesscss_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}