[SCSS/SASS] 変数でカラー管理をしていたら警告が発生した件の対処方法

環境情報

• Nuxt: 2.15.6
• sass: 1.32.13

経緯

nuxtでsassのバージョンアップしたらSCSSで警告が出るようになってしまった。

警告文

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

修正前ソースコード

よく見かける変数を用いたカラーごとのcssスタイルの定義だが、このソースコードの記述方法が良くないと警告が発生している模様。

$color-white: #ffffff;
$color-grey: #f5f5f5;

$colors: (
  grey: (
    background-color: #{$color-grey},
  ),
  white: (
    background-color: #{$color-white},
  ),
);

@each $name, $color in $colors {
  .button-#{$name} {
    background-color: map-get($color, background-color);
  }
}

修正前ソースコード

修正点は1箇所で、変数で利用しているkeyをダブルクォーテーションで囲む必要がある。

$color-white: #ffffff;
$color-grey: #f5f5f5;

// keyのgrey, whiteに対してダブルクォーテーションで囲む必要がある！
$colors: (
  "grey": (
    background-color: #{$color-grey},
  ),
  "white": (
    background-color: #{$color-white},
  ),
);

// ここは修正なし
@each $name, $color in $colors {
  .button-#{$name} {
    background-color: map-get($color, background-color);
  }
}

参考

最後に

警告は無視せずに必ずチェックしましょう！