如何解决这个 sass 插值问题

Posted 2023-03-06

【中文标题】如何解决这个 sass 插值问题

【英文标题】：How to I solve this sass interpolation issue

【发布时间】：2019-12-18 16:22:37

【问题描述】：

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

   ╷
93 │       .text-#$colorName-#$shade 
   │               ^^^^^^^^^^
   ╵
    src\assets\styles\scss\_palette.scss 93:15  @import
    stdin 44:9  

我按照建议尝试了类似的方法，

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

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

【问题讨论】：

你试过.text-#"" + $colorName-#$shade 吗？

【参考方案1】：

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

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

到

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

工作。

【参考方案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);
    

【参考方案3】：

这应该处理警告：

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