しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。
昔から、Sassで / （スラッシュ）使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。
Breaking Change: Slash as Division
公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。
修正方法
以下はブログのサンプルを簡略化したもの。
修正前。括弧を使ってあればまだ見やすいと言える…。
grid-row: span (6 / 2) / 7;
修正後。@useで sass:math をインポートすること。
@use "sass:math";
grid-row: span math.div(6, 2) / 7;
冗長にはなるけど読みやすくなったと思う。
自動移行
Sass Migratorによる移行が可能。
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
その他の重要な変更
他にも重要な変更が３つあるんだけど、個人的には使用してないものだった。