破壊的変更: Color JS API

Sassのカラー関数の一部の側面が非推奨になっているのと同じように、CSS Color 4のサポートが追加されたため、色を操作するためのJS APIの一部の部分も非推奨になりました。

color.change() でスペース間変更に space が必要になりましたcolor.change() でスペース間変更に space が必要になりました permalink

以前は、color.change()メソッドは、RGB、HSL、またはHWBスペースからチャネル名のセットを受け取るだけでした。これらのチャネルがスペースをまたいで混在していない限り（たとえば、redとhueの両方を同時に変更することによって）、Sassはどのスペースが意図されているかを判断できました。

Color 4では、カラースペースはチャネル名だけではあいまいではなくなりました。多くのスペースには、異なる範囲のred、green、およびblueチャネルがあります。多くのスペースには、非常に異なるカラーホイールを生成するhueチャネルがあります。このあいまいさを修正するために、color.change()は、変換を行いたいカラースペースの名前を明示的に指定するspaceパラメーターを受け取るようになりました。

const color = new sass.SassColor({red: 0x66, green: 0x33, blue: 0x99});
color.change({hue: 270, space: "okclh"});

問題の色がレガシーカラースペースにない場合、または非レガシーカラースペースにのみ存在する彩度のようなチャネルを変更する場合は、カラースペースの指定が必須です。色の独自のスペースに存在するチャネルを変更する場合は常にオプションです。したがって、color.change({red: 0.8})は常に、red、green、およびblueチャネルを持つ任意の色にネイティブの赤チャネルを指します。

後方互換性のために、レガシー色のレガシーチャネルを変更している場合は、Sassは色を自動的に変換します。ただし、この動作は非推奨です。安全のために、変更したいチャネルのカラースペースに色がすでにあることを確認している場合を除き、常に spaceパラメーターを渡す必要があります。

null チャネル値null チャネル値 permalink

CSS Color 4の主な変更点の1つは、「欠落した」チャネルという新しい概念です。たとえば、hsl(none 0% 40%)には欠落した色相があり、ほとんどの場合0として扱われますが、色の補間に寄与しないため、この色を使用したグラデーションの中央にファントムの赤の色相は表示されません。色を構築する場合、Sassは欠落値を値nullとして表します。

CSS Color 4のサポートを追加する前は、Sass JS APIのTypeScript型は、関連するすべての場所でのnullの使用を禁じていました。ただし、コード自体はnullをundefinedと同じように扱い、この動作に依存していたプレーンなJavaScriptコードとの互換性を損ないたくありません。今のところ、null値はundefinedとして扱われ、新しい[レガシー色]を構築するか、レガシー色に対してcolor.change()を呼び出すときに非推奨の警告を発行します。いずれの場合も、spaceパラメーターを明示的に渡すと、新しい動作にオプトインし、nullは欠落したチャネルとして扱われます。

移行期間移行期間 permalink

互換性

Dart Sass

1.79.0以降

LibSass

✗

Ruby Sass

✗

まず、変更される予定のこれらのAPIのすべての使用に対して非推奨の警告を発行します。Dart Sass 2.0.0では、破壊的変更が完全に有効になり、古い動作は以前のように機能しなくなります。

警告を非表示にできますか？警告を非表示にできますか？ permalink

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

簡潔モードと詳細モード簡潔モードと詳細モード permalink

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

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

依存関係の非推奨を非表示にする依存関係の非推奨を非表示にする permalink

依存関係に、対処できない非推奨の警告がある場合があります。JavaScript APIのquietDepsオプションを使用して、アプリの非推奨の警告を出力しながら、依存関係からの非推奨の警告を非表示にできます。

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

特定の非推奨を非表示にする特定の非推奨を非表示にする permalink

特定の非推奨が問題ないことがわかっている場合は、JavaScript APIのsilenceDeprecationsオプションを使用して、その特定の非推奨の警告を非表示にできます。