要点

Sassにおける除算で / （スラッシュ） は非推奨となり、将来的に廃止されます。

Dart Sass 1.33.0 以降では非推奨(deprecated) と表示されます。

Version 1.35.1 におけるエラーメッセージ

Dart Sass 2.0.0 以降では / による除算は廃止予定です。

代替として math.div を使うよう勧告されています。

math.divの使い方

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

.example{
  width: math.div(24px, 16px) * 1rem;
}

math.divが使えないんだけど？

Sassの実装によっては使えません。

今回対応が必要なのは Dart版Sassを使っている環境だけなので、特にwarningが表示されない環境でしたら無理に移行しなくても良いです。

なんでこんな変更を？

https://sass-lang.com/d/slash-div に理由が掲載されていますが、CSSの値で / を区切りとして使用するプロパティがあります。そういった場合「除算と区切りとどちらの意味として取ればいいか判断できない」という状況が出てきました。

例えば下記のような例で除算されると想定外の不具合が起きる恐れがあります。

/* css でこのように書きたい！ */
.example{
  grid-row: 1 / -1;
}

/* ということで Sass上でこんなふうに書くと */
.example{
  grid-row: 1 / -1;
}

/* 除算されてこうなっちゃう恐れが！ */
.example{
  grid-row: -1;
}

ただ個人的にはもうちょっとスマートな解決方法がなかったものかなというモヤモヤはあります。

旧Sassとの互換性問題がありますからね。

/ の除算が廃止されたら旧資産が使えなくなる！困る！

一括変更できるツール sass-migrator が提供されています。

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

/ を使い続けたいから、warning表示だけ消したい！

調べた限りでは、Dart Sassのバージョンを1.33.0 より前に戻す以外の方法が見つかりませんでした。

そんな方法があれば教えていただきたいです。

※同一エラーの出力個数が制限されるようになりましたので若干改善はされています。

まとめ

個人的な問題として、Dart Sass と （vscode拡張の）Live Sass Compiler のどっちを使っても同じようにコンパイルできる環境を作ってたので、math.div が使えない Live Sass Compiler との互換性が維持できないという問題がございまして悩ましいところです。

かと言って Warning を放置していると肝心なエラーが流れてしまいそうなので困ったものです。

@import によるSassファイルの取り込みが2022年10月頃には廃止予定だったりと大きな変更が続きますが、よし Stylusに乗り換えよう がんばって追いついていきたいと思います。

備考：各言語における実装について

現在、Sassコンパイラの実装には主に下記があります。

基本的に math.div はDart Sassでしか使えないようです。

• Dart Sass（実装言語：Dart）
  主流。
• Ruby Sass（実装言語：Ruby）
  旧主流。今後新機能の開発はない。
• libSass（実装言語：C/C++、他）
  Ruby Sassが主流の頃、高速化を目的に作られた。しかしDart Sassではほぼ同等レベルまで高速化されたため非推奨となった。
• Sass.js（実装言語：JavaScript）
  JavaScriptで実装。ブラウザ上でSassをコンパイルできたり、node.js からコンパイルできたりする。マイナーではあるが、vscodeで簡単に Sassが取り扱えるようになる Live Sass Compilerが内部で使用しているので、知らずに使用している人は多いと思われる。2年くらいメンテナンスされていない模様。