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 使っとけって話なのかもしれません。