破壊的変更: 除算としてのスラッシュ 

Sassは現在、コンテキストによっては/を除算演算として扱い、別のコンテキストでは区切り文字として扱います。これにより、Sassユーザーは特定の/が何を意味するのかを判断するのが難しくなり、区切り文字として/を使用する新しいCSS機能を扱うのが困難になります。

互換性
Dart Sass
partial
LibSass
✗
Ruby Sass
✗

今日、Sassは、/を除算として扱うべきか区切り文字として扱うべきかを判断するために、複雑なヒューリスティクスを使用しています。それでも、区切り文字としては、Sass内から検査するのが難しい、引用符で囲まれていない文字列を生成するだけです。CSS Gridや新しいrgb()およびhsl()構文など、/を区切り文字として使用するCSS機能が増えるにつれて、Sass ユーザーにとってますます苦痛になっています。

SassはCSSのスーパーセットであるため、/を唯一の区切り文字として再定義することにより、CSSの構文に合わせています。/は、今日,が機能するのと同様に、新しいタイプのリスト区切り文字として扱われます。代わりに、除算は新しいmath.div()関数を使用して記述されます。この関数は、今日の/とまったく同じように動作します。

この非推奨は、calc()式内の/の使用には影響しません。

プレイグラウンド

SCSS構文

@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}
プレイグラウンド

Sass構文

@use "sass:math"

// Future Sass, doesn't work yet!
.item3
  $row: span math.div(6, 2) / 7 // A two-element slash-separated list.
  grid-row: $row

CSS出力

.item3 {
  grid-row: span 3 / 7;
}

移行期間移行期間のパーマリンク

互換性 (math.div()とlist.slash())
Dart Sass
1.33.0以降
LibSass
✗
Ruby Sass
✗

移行を容易にするために、まずmath.div()関数を追加しました。/演算子は今のところは除算を行いますが、その際、非推奨の警告も出力します。ユーザーは、すべての除算をmath.div()を使用するように切り替える必要があります。

💡 豆知識

覚えておいてください。制御できないライブラリからの非推奨警告を抑制できます。コマンドラインインターフェースを使用している場合は、--quiet-depsフラグを渡し、JavaScript APIを使用している場合は、quietDepsオプションをtrueに設定できます。

プレイグラウンド

SCSS構文

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3
プレイグラウンド

Sass構文

@use "sass:math"

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px) // 3

スラッシュ区切りリストも移行期間中に使用可能になります。まだ/で作成できないため、それらを作成するためにlist.slash()関数が追加されます。また、list.join()関数とlist.append()関数に$separatorとして"slash"を渡すこともできます。

プレイグラウンド

SCSS構文

@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}
プレイグラウンド

Sass構文

@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS出力

.item3 {
  grid-row: span 3 / 7;
}
互換性 (ファーストクラスのcalc)
Dart Sass
1.40.0以降
LibSass
✗
Ruby Sass
✗

または、ユーザーは除算演算をcalc()式でラップすることができ、Sassはそれを単一の数値に単純化します。

プレイグラウンド

SCSS構文

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px); // 3
プレイグラウンド

Sass構文

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px) // 3

自動移行自動移行のパーマリンク

Sassマイグレーターを使用して、スタイルシートを自動的に更新して、math.div()とlist.slash()を使用できます。

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

警告を抑制できますか？警告を抑制できますか？ パーマリンク

Sassは、表示する非推奨警告と タイミングを管理するための強力なオプションスイートを提供します。

簡潔モードと詳細モード簡潔モードと詳細モード パーマリンク

デフォルトでは、Sassは簡潔モードで実行され、追加の警告を抑制する前に、各タイプの非推奨警告を5回だけ出力します。これにより、ユーザーは、コンソールの ノイズを過度に発生させることなく、今後の破壊的変更に注意する必要があることを確実に知ることができます。

代わりにSassを詳細モードで実行すると、発生するすべての非推奨警告が出力されます。これは、非推奨を修正する際に残りの作業を追跡するのに役立ちます。コマンドラインで--verboseフラグ、またはJavaScript APIでverboseオプションを使用することにより、詳細モードを有効にできます。

⚠️ 注意！

JSAPIから実行する場合、Sassはコンパイル間で情報を共有しないため、デフォルトでは、コンパイルされる各スタイルシートに対して5つの警告が出力されます。ただし、カスタムLoggerを作成することで、これを修正できます（または、お気に入りのフレームワークのSassプラグインの作成者に作成を依頼できます）。これにより、非推奨ごとに5つのエラーのみが出力され、複数の コンパイルで共有できます。

依存関係の非推奨の抑制依存関係の非推奨の抑制 パーマリンク

場合によっては、依存関係に、どうしようもない非推奨警告が含まれている場合があります。コマンドラインで--quiet-depsフラグ、またはJavaScript APIでquietDepsオプションを使用することにより、依存関係からの非推奨警告を抑制しながら、アプリでそれらを出力することができます。

このフラグの目的では、「依存関係」とは、エントリポイントスタイルシートからの相対ロードの連続ではないスタイルシートのことです。これは、ロードパスから来るものと、ほとんどのカスタム インポーターを通じてロードされるスタイルシートを意味します。

特定の非推奨の抑制特定の非推奨の抑制 パーマリンク

特定の非推奨が自分にとって問題ではないことがわかっている場合は、コマンドラインで--silence-deprecationフラグ、またはJavaScript APIでsilenceDeprecationsオプションを使用することにより、その特定の非推奨の警告を抑制できます。