2022/06/16 (更新日: 2023/05/20)

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

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは、かんです。

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

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

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

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

math.divの書き方

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

変更前

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

変更後

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

これが基本的な書き方です。
注意点としては、math.divを使用するには、@use “sass:math”; をファイルの先頭に追加する必要があります。また、math.div はSass 1.33.0 から利用可能になりました。

なので、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を使用していないのであれば、下記のままで十分です。

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

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

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


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

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

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

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

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

2021年までの情報では、Sassでは、「演算子 / 」を使用して除算を行うことができました。

ただし、この演算子は他のコンテキスト（たとえば font: 16px/24px のようなフォントショートハンドプロパティ）でも使われるため、混乱を招く可能性があったようです。

それを対処するために、Sassは除算操作のための新しい関数 math.div を導入しました。
これは、Sassの次の主要バージョン（Sass 2.0）から / 演算子の使用が非推奨となり、代わりに math.divが推奨されることを示しています。