Sass：変数+%でプロパティ値をビルドするとWARNINGが出る

Sassのビルド時にいつの間にか以下のWARNINGが出ていることに気付いた。

DEPRECATION WARNING on line 000 of ***_common.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("#{$i * 5}% !important")

You can use the sass-convert command to automatically fix most cases.

WARNINGなのでCSSは正常出力されているけど、どうにも非推奨のことをやっているようなので対応した。

該当箇所

該当するSassのコードは以下の内容。

@for $i from 0 through 20 {
  .w#{$i * 5} {
    width: #{$i * 5}% !important;
  }
  .h#{$i * 5} {
    height: #{$i * 5}% !important;
  }
}

これをビルドすると、以下のように幅と高さを調整する汎用的なCSSクラスを生成している。

.w5 {width: 5%}
.w10 {width: 10%}
...
.h5 {height: 5%}
.h10 {height: 10%}
...

抜粋すると以下の書き方が気に食わないようだった。

width: #{$i * 5}% !important;

height: #{$i * 5}% !important;

対応

WARNINGメッセージにある通り「unquote」で出力値を囲ってやるとWARNINGが止まった。 出力されるCSSに変わりはなし。

width: unquote("#{$i * 5}% !important");

height: unquote("#{$i * 5}% !important");

しかし同じ書き方をしている以下の箇所ではWARNINGが出ていなかった。

@for $i from 0 through 20 {
  .mg#{$i * 5} {
    margin:#{$i * 5}px !important;
  }
}

違う点は出力値が「%」か「px」かのみで、試しに「px」で書いていた箇所を「%」に変えたら案の定WARNINGが出た。

記号はビルドに誤作動を与える可能性があるので unquote 使っとけって話なのかもしれません。