かんろぐ Written by kan

【コピペOK】Sassのスラッシュ(/,除算)は将来的に廃止される【math.divに切り替える】

CODE HTML/CSS

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

こんにちは、かんです。

Sassでスラッシュ(/)ばかり使っていると、コンパイルするたび警告されますよね。

エラー表記みたいでうんざりするし、エラー文だけで何行もズラーっと表示されるし、、」こんな状況って困りますよね。

なので、サクッと切り替えてエラーから解放されていきましょう\(^^)/

ちなみに今回はDart Sassを使っている環境だけなので、エラーが表示されていなければ問題ありません。Sassの実装によっては使えない場合もありますが、エラーでお困りの方のみ対象といった感じです。

math.divの書き方

まずはmath.divの書き方から、下記をどうぞ。

変更前

.hoge {
  width: (100% / 4);
}

変更後

@use "sass:math"; /* sassファイル行頭で記述 */
.hoge {
  width: math.div(100%, 4);
}

これが基本的な書き方です。
Sassファイルの頭に、@use “sass:math”; を記述してください。

もうちょっと他のパターンも見ていきます。


@use "sass:math"; /* sassファイル行頭で記述 */

@function rem($px) {
    @return math.div(px, 16) * 1rem;
}

僕は基本的にfont-sizeをpx→remで対応しており、このパターンをメインで使っています。


@use "sass:math"; /* sassファイル行頭で記述 */
 
.hogehoge{
  width: math.div(24px, 16px) * 1rem;
}

こんな感じで使用していきます。

※僕も覚えたてなので、ミスなどあれば教えてください、、(泣)

DartSassを使用していないのであれば、下記のままで十分です。

Sassのスラッシュ(/,除算)は将来的に廃止される

Dart Sassのバージョン2.0.0以降では、スラッシュ(/,除算)による計算が廃止予定になるとのこと。なので、現状は大丈夫でも将来的には移行する必要があるみたいですね。そして、代わりにmath.divを使いましょう〜ということになってるみたいです。

スラッシュ(/,除算)が廃止されたらどうするの?

安心してください。ちゃんと専用ツールが用意されています。

sass-migratorは一括変更できるツール


$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

このコマンドをターミナルでタターーンと打ってやりましょう。

※僕はまだ試していないので、感想を教えていただけたら嬉しいです🙇‍♂️

スラッシュ(/,除算)を使い続けることはできないの?

現状、Dart Sassのバージョンが1.33.0以降で発生する事例のようです。

つまり、それ以前のバージョンに戻せばエラーは解消されますが、それもリスクなのでおすすめはできません。
諦めずにエラーと格闘せざるを得ません。。/(^o^)\

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事