将node-sass切换为sass后，数组变量生成样式遇警告求助

你遇到的警告是因为dart-sass（即现在的sass包）对类型的处理比node-sass更严格：你的$colors map里的green键，被dart-sass识别成了颜色类型（而非字符串），插值生成类名时就会触发这个提示——它担心你误把颜色值当成字符串来用，导致生成无效CSS。

给你两个直接解决的方案：

方案一：给map的键加上引号（推荐） #

明确把键定义为字符串，避免dart-sass将其解析为颜色类型：

$colors: (
        "black": #000,
        "white": #fff,
        "violet": $colorMainViolet,
        "red": $colorRed,
        "green": $colorGreen,
);

@each $property, $value in $colors {
  .has-#{$property}-color {
    color: $value;
  }
}

方案二：插值时把键转为字符串 #

如果不想修改原map的定义，在插值时通过"" + $property或者sass的字符串函数将颜色类型转为字符串：

@each $property, $value in $colors {
  .has-#{"" + $property}-color {
    color: $value;
  }
}

或者使用官方推荐的string()函数：

@use "sass:string";

@each $property, $value in $colors {
  .has-#{string.to-string($property)}-color {
    color: $value;
  }
}

警告原文：
Warning: You probably don't mean to use the color value green in interpolation here.
It may end up represented as green, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "green").
If you really want to use the color value here, use '"" + $property'.

内容的提问来源于stack exchange，提问作者user2294131