The Default Color names Conflict w/ SASS Interpolation

WARNING on line 8, column 9 of /concise/components/_colors.scss: You probably don’t mean to use the color value white' in interpolation here. It may end up represented as #ffffff, which will likely produce invalid CSS. Always quote color names when using them as strings (for example, "white"). If you really want to use the color value here, use"" + $bg-color’.

My work-around was simply to add -color to the colors, so “green-color” and therefor also had to change the bg css settings and I think a few others.

[keenanpayne]

@KamesCG

Does wrapping the color names in quotes fix this issue?

eg:

// Background colors
$bg-colors: (
  "white":  #ffffff,
  "black":  #222222,
  "gray":   #999999,
  "green":  #5cb85c,
  "blue":   #5bc0de,
  "yellow": #ed9c28,
  "red":    #d9534f
);

[frankdavidcorona]

@KamesCG Does wrapping the color names in quotes fix this issue? eg:

// Background colors
$bg-colors: (
  "white":  #ffffff,
  "black":  #222222,
  "gray":   #999999,
  "green":  #5cb85c,
  "blue":   #5bc0de,
  "yellow": #ed9c28,
  "red":    #d9534f
);

In my case I’ve this annotation: .#{$colorName}#{$hue}-bg { background-color: $color !important; }

How to fix?

Solved using this way: .#{''+$colorName+''}#{$hue}-border-bottom { border-bottom-color: $color !important; }