互換性なしの変更: 厳格な関数 単位
様々な組み込み関数が、許容される単位をより厳格にし、それらの単位を一貫して処理するようになります。これにより、SassはCSS仕様との互換性が向上し、エラーをより迅速に検出できるようになります。
色相色相パーマリンク
- Dart Sass
- 1.32.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
色の色相を指定する場合、CSSでは任意の角度単位（deg、grad、rad、またはturn）が許可されます。単位のない数値も許可され、degとして解釈されます。従来、Sassは任意の単位を許可し、degとして解釈していました。これは、有効なCSS表現hsl(0.5turn, 100%, 50%)がSassでは許可されるものの、完全に間違って解釈されるため、特に問題がありました。
この問題を解決し、SassをCSS仕様に合わせるために、複数 フェーズで変更を加えています。
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.32.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
まず、色相にdeg以外の単位付きの数値を渡した場合、Sassは非推奨警告を出力するようになりました。単位のない数値は引き続き 許可されます。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- 1.52.1 以降
- LibSass
- ✗
- Ruby Sass
- ✗
次に、CSS仕様に合わせて色相パラメータの角度単位の処理方法を変更しました。つまり、grad、rad、またはturn単位の数値はdegに変換されます。0.5turnは180degに、100gradは90degに変換されるなどです。
この変更は、Dart Sass互換性ポリシーに従ってCSS互換性を維持するために必要なため、マイナーバージョンの増分のみで行われました。ただし、Sassがすべての有効なCSSをCSS仕様に従って解釈するように、動作の変更は最小限に抑えています。
フェーズ 3フェーズ 3 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
最後に、Dart Sass 2.0.0では、角度単位以外の単位を持つ色相パラメータが渡された場合、カラー関数はエラーをスローします。単位のない色相は引き続き 許可されます。
彩度と明度彩度と明度 パーマリンク
HSL色の彩度と明度を指定する場合、CSSでは%単位のみが許可されます。単位のない数値でさえ許可されません（色相とは異なります）。従来、Sassは任意の単位を許可し、%として解釈していました。hsl(0, 100px, 50s)と記述しても、Sassはredという色を返していました。
この問題を解決し、SassをCSS仕様に合わせるために、2つの フェーズで変更を加えています。
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.32.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
現在、Sassは、明度または彩度に単位がない数値、または%以外の単位の数値を渡した場合、非推奨警告を出力するだけです。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
Dart Sass 2.0.0では、単位がないか、%以外の単位の彩度または明度パラメータが渡された場合、カラー関数はエラーをスローします。
アルファアルファパーマリンク
色のアルファ値を指定する場合、CSS（Colors Level 4以降）では、0〜1の単位のない値、または0%〜100%の%値が許可されます。ほとんどの場合、Sassはこの動作に従いますが、color.adjust()関数とcolor.change()関数は従来、任意の単位を許可し、単位なしとして解釈していました。color.change(red, $alpha: 1%)と記述しても、Sassは不透明な色redを返していました。
この問題を解決し、SassをCSS仕様に合わせるために、3つの フェーズで変更を加えています。
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.56.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
現在、Sassは、color.change()またはcolor.adjust()にアルファ値として、%を含む任意の単位の数値を渡した場合、非推奨警告を出力するだけです。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
次に、color.change()とcolor.adjust()のアルファ引数の%単位の処理方法を変更します。単位%のアルファ値は100%で除算され、0〜1の単位のない数値に変換されます。
この変更は、他のSass関数との整合性を向上させるバグ修正であるため、マイナーバージョンの増分のみで行われます。ユーザーがコードを調整し、バグを回避する時間を与えるため、フェーズ1がリリースされてから最低3ヶ月後に変更されます。
フェーズ 3フェーズ 3 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
最後に、Dart Sass 2.0.0では、%以外の単位のアルファパラメータが渡された場合、color.change()とcolor.adjust()はエラーをスローします。単位のないアルファ値は引き続き 許可されます。
math.random()math.random() パーマリンク
math.random()関数は、従来、$limitの単位を無視し、単位のない値を返していました。たとえば、math.random(100px)は "px" を削除し、42のような値を返していました。
Sassの将来のバージョンでは、$limit引数の単位の無視を停止し、同じ 単位の乱数を返します。
PlaygroundSCSS構文
@use "sass:math";
// Future Sass, doesn't work yet!
@debug math.random(100px); // 42px
Sass構文
@use "sass:math"
// Future Sass, doesn't work yet!
@debug math.random(100px) // 42px
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.54.5 以降
- LibSass
- ✗
- Ruby Sass
- ✗
現在、Sassは、単位付きの$limitをmath.random()に渡した場合、非推奨警告を出力します。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
Dart Sass 2.0.0では、単位付きの$limit数値を渡すと エラーになります。
フェーズ 3フェーズ 3 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
Dart Sass 2.0.0以降のマイナーリリースでは、math.random()関数に単位付きの$limit数値を渡すことが再び許可されます。単位のない 数値ではなく、$limitと同じ単位の乱数を返します。
ウェイトウェイトパーマリンク
color.mix()関数とcolor.invert()関数はどちらも、その引数$weightが概念的にはパーセンテージを表しているにもかかわらず、従来、その引数の単位を無視していました。Sassの将来のバージョンでは、単位%が必要になります。
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.56.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
現在、Sassは、color.mix()またはcolor.invert()に単位がないか、%以外の単位の$weightを渡した場合、非推奨警告を出力します。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
Dart Sass 2.0.0では、単位がないか、%以外の単位の$weightが渡された場合、color.mix()とcolor.invert()はエラーをスローします。
インデックスインデックスパーマリンク
list.nth()関数とlist.set-nth()関数はどちらも、従来、その引数$nの単位を無視していました。Sassの将来のバージョンでは、任意の 単位が禁止されます。
フェーズ 1フェーズ 1 パーマリンク
- Dart Sass
- 1.56.0 以降
- LibSass
- ✗
- Ruby Sass
- ✗
現在、Sassは、color.mix()またはcolor.invert()に単位がないか、%以外の単位の$weightを渡した場合、非推奨警告を出力します。
フェーズ 2フェーズ 2 パーマリンク
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
Dart Sass 2.0.0では、単位付きのインデックス$nが渡された場合、list.nth()とlist.set-nth()はエラーをスローします。
警告を抑制できますか？警告を抑制できますか？ パーマリンク
Sassは、表示する非推奨警告とそのタイミングを管理するための強力なオプションスイートを提供します。
簡潔モードと詳細モード簡潔モードと詳細モード パーマリンク
デフォルトでは、Sassは簡潔モードで実行されます。簡潔モードでは、各タイプの非推奨警告は5回だけ出力され、それ以降は追加の警告が抑制されます。これにより、ユーザーは今後の互換性のない変更を認識する必要がある場合に認識できるようにしながら、コンソールに過剰なノイズが発生するのを防ぎます。
冗長モードでSassを実行すると、検出されたすべての非推奨警告が出力されます。これは、非推奨の修正作業の追跡に役立ちます。冗長モードは、コマンドラインで--verboseフラグを使用するか、JavaScript APIでverboseオプションを使用することで有効にできます。
⚠️ ご注意ください！
JS APIから実行する場合、Sassはコンパイル間で情報を共有しないため、デフォルトではコンパイルされる各スタイルシートに対して5つの警告が出力されます。ただし、非推奨ごとに5つのエラーのみを出力し、複数のコンパイルで共有できるカスタムLoggerを記述すること（または、お気に入りのフレームワークのSassプラグインの作者に記述依頼すること）で、これを修正できます。
依存関係における非推奨警告の抑制依存関係における非推奨警告の抑制 permalink
依存関係に、対処できない非推奨警告が含まれている場合があります。コマンドラインで--quiet-depsフラグを使用するか、JavaScript APIでquietDepsオプションを使用することで、アプリの警告は出力しつつ、依存関係からの非推奨警告を抑制できます。
このフラグの目的において、「依存関係」とは、エントリポイントのスタイルシートからの相対的なロードの連続ではないスタイルシートです。つまり、ロードパスからのもの、およびカスタムインポーターを通してロードされるほとんどのスタイルシートを指します。
特定の非推奨警告の抑制特定の非推奨警告の抑制 permalink
特定の非推奨が問題にならないことがわかっている場合は、コマンドラインで--silence-deprecationフラグを使用するか、JavaScript APIでsilenceDeprecationsオプションを使用して、その特定の非推奨に関する警告を抑制できます。