sass - building style with array

Question

Now i changed package.json configuration from node-sass to sass and have a problem with generating styles from array variable.

My sass file look like that:

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

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

An warning occur in line with .has-#{$property}-background-color {

with the comment: "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'."

While this structure looks good, I think! Any help ?

Answer 1

To fix the warning you can quote the names in the map:

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