破壊的変更: 無効な 結合子

Sassは歴史的に、セレクタにおける先頭、末尾、および繰り返し結合子の使用について非常に寛容でした。これらの結合子は、ネストに役立つ場合を除き、非推奨となります。

Sassは歴史的に、結合子の3つの無効な使用をサポートしていました。

  • + .error {color: red}のような先頭結合子。

  • .error + {color: red}のような末尾結合子。

  • div > > .error {color: red}のような繰り返し結合子。

これらのいずれも有効な CSS ではなく、それらはすべてブラウザに問題のスタイルルールを無視させます。それらをサポートすることは、Sassの実装にかなりの複雑さを追加し、特に@extendルールに関連するさまざまなバグを修正することを困難にしました。そのため、これらの使用のサポートを削除する決定をしました。

1つの大きな例外があります。先頭と末尾の結合子は、ネストの目的で使用できます。たとえば、以下はまだ十分にサポートされています。

プレイグラウンド

SCSS 構文

.sidebar > {
  .error {
    color: red;
  }
}
プレイグラウンド

Sass 構文

.sidebar >
  .error
    color: red

CSS 出力

.sidebar > .error {
  color: red;
}

Sassは、ネストが解決された後、セレクタに先頭または末尾の結合子が残っている場合にのみエラーを生成します。一方、繰り返し結合子は常にエラーとなります。

(おそらく誤って)無効な結合子を含んでいる既存のスタイルシートを確実にするために、Dart Sassの次のメジャーリリースまで移行期間を設けます。

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

互換性
Dart Sass
1.54.0以降
LibSass
✗
Ruby Sass
✗

まず、すべての二重結合子、およびネストが解決された後にセレクタに最終的に残る先頭または末尾の結合子に対して、非推奨警告を発行します。

💡 豆知識

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

さらに、無効な CSS であると認識されるセレクタは、コンパイル済みの CSS から即座に省略しますが、1つの例外があります。先頭の結合子で始まるセレクタは、ネストされた@importルールまたはmeta.load-css()ミックスインで使用される可能性があるため、省略しません。ただし、このパターンは推奨せず、Dart Sass 2.0.0でサポートを終了します。

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

Sassは、どの非推奨警告をいつ表示するかを管理するための強力なオプションスイートを提供しています。

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

デフォルトでは、Sassは簡潔モードで実行され、追加の警告を抑制する前に、各タイプの非推奨警告を5回だけ出力します。これにより、コンソールに圧倒的なノイズを作成することなく、ユーザーが今後の破壊的な変更について知っておく必要がある場合に、ユーザーに知らせることができます。

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

⚠️ 注意！

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

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

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

このフラグの目的では、「依存関係」とは、エントリポイントのスタイルシートからの相対的な読み込みのシーケンスだけではないスタイルシートのことです。これは、ロードパスから取得するもの、およびほとんどのカスタム インポーターを介して読み込まれるスタイルシートを意味します。

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

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