破壊的変更:厳密な単項 演算子

Sassは歴史的に、-+を、それが二項演算子または単項演算子であることを意図したのかどうか曖昧になるような方法で使用することを許可してきました。この紛らわしい構文は 非推奨になります。

このプロパティはどのように コンパイルされますか?

プレイグラウンド

SCSS構文

$size: 10px;

div {
  margin: 15px -$size;
}
プレイグラウンド

Sass構文

$size: 10px

div
  margin: 15px -$size

一部のユーザーは「-$sizeに付いているので、margin: 20px -10pxになるはずだ」と言うかもしれません。別のユーザーは「-20px$sizeの間にあるので、margin: 5pxになるはずだ」と言うかもしれません。Sassは現在、後者の意見に同意していますが、本当の問題は、そもそもそれが非常に紛らわしいということです!これはCSSのスペースで区切られたリスト構文とSassの算術 構文が組み合わさった結果、自然ではあるが不幸なことです。

そのため、これをエラーにする方向に進んでいます。今後は、二項-または+演算子(つまり、2つの数値を減算または加算する演算子)を使用したい場合は、両側またはどちらの側にも空白を入れる必要が あります。

  • 有効:15px - $size
  • 有効:(15px)-$size
  • 無効:15px -$size

スペースで区切られたリストの一部として単項の-または+演算子を使用したい場合は、(引き続き)括弧で囲む必要が あります。

  • 有効:15px (-$size)

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

互換性
Dart Sass
1.55.0以降
LibSass
Ruby Sass

Dart Sass 2.0.0ではこれをエラーにしますが、それまでは非推奨の 警告を発行するだけです。

💡 豆知識

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

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

Sassマイグレーターを使用して、必要に応じて-または+演算子の後にスペースを追加するようにスタイルシートを自動的に更新できます。これにより、これらのスタイルシートの既存の動作が保持され ます。

$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss

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

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

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

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

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

⚠️ 注意!

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

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

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

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

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

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