破壊的変更：混合 宣言

CSSは、ネストされたルールと混合された宣言の処理方法を変更しており、Sassがその動作と一致するようにしたいと考えています。

これまでの経緯これまでの経緯 パーマリンク

従来、Sassでネストされたルールと宣言を混在させた場合、外側のセレクタの重複を必要以上に避けるために、すべての宣言がルールの先頭に移動されていました。例えば

プレイグラウンド

SCSS構文

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

プレーンCSSネストが初めて導入されたとき、その動作は同じでした。しかし、検討の結果、CSSワーキンググループは、ドキュメントに表示される順序で宣言を適用する方が理にかなっていると判断しました。次のように

プレイグラウンド

SCSS構文

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

古い方法の廃止古い方法の廃止 パーマリンク

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

ネストされたルール*の後*に宣言を使用することは、現在Sassでは非推奨となっています。これは、今後の変更をユーザーに通知し、スタイルシートを互換性のあるものにする時間を与えるためです。将来のリリースでは、Dart SassはプレーンCSSネストによって生成される順序と一致するように変更されます。

新しいCSSセマンティクスを早期にオプトインしたい場合は、ネストされた宣言を& {}で囲みます。

プレイグラウンド

SCSS構文

.example {
  color: red;

  a {
    font-weight: bold;
  }

  & {
    font-weight: normal;
  }
}

警告を非表示にできますか？警告を非表示にできますか？ パーマリンク

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

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

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

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

⚠️ 注意！

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

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

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

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

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

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