破壊的変更: カラー 関数

すべての色が相互に互換性があると想定して設計された特定のカラー関数は、SassがCSS Color 4のすべての色空間をサポートするようになったため、もはや意味をなさなくなりました。

歴史的に、すべてのSassカラー値は同じ色域をカバーしていました。色がRGB、HSL、またはHWBとして定義されているかどうかにかかわらず、sRGB色域のみをカバーし、1990年代半ば以降、モニターが表示できる色しか表現できませんでした。 Sassが元のカラー関数セットを追加したとき、それらはすべての色をこれらの表現間で自由に変換でき、「赤」や「色相」などの各チャンネル名に対して単一の明確な意味があることを想定していました。

CSS Color 4のリリースは、すべてを変えました。これは、sRGBよりも異なる（より広い）色域を持つ多くの新しい色空間のサポートを追加しました。これらの色をサポートするために、Sassはカラー関数の動作方法を再考する必要がありました。color.channel()やcolor.to-space()のような新しい関数の追加に加えて、もはや真実ではない前提に基づいていた古い関数の多くは非推奨になりました。

古いチャンネル関数古いチャンネル関数 のパーマリンク

チャンネル名は、色空間全体で曖昧になりました。レガシーRGB空間にはredチャンネルがありますが、display-p3、rec2020など、さらに多くの空間にもあります。これは、color.red()、color.green()、color.blue()、color.hue()、color.saturation()、color.lightness()、color.whiteness()、color.blackness()、color.alpha()、およびcolor.opacity()が削除されることを意味します。代わりに、通常、どの色空間を操作しているかを示す明示的な$space引数を使用して、特定のチャンネルの値を取得するためにcolor.channel()関数を使用できます。

Playground

SCSS構文

@use "sass:color";

$color: #c71585;
@debug color.channel($color, "red", $space: rgb);
@debug color.channel($color, "red", $space: display-p3);
@debug color.channel($color, "hue", $space: oklch);
Playground

Sass構文

@use "sass:color"

$color: #c71585
@debug color.channel($color, "red", $space: rgb)
@debug color.channel($color, "red", $space: display-p3)
@debug color.channel($color, "hue", $space: oklch)

シングルチャンネル調整関数シングルチャンネル調整関数 のパーマリンク

これらは、古いチャンネル関数と同じ曖昧さの問題を抱えているだけでなく、Color 4のサポートが追加される前でさえ、color.adjust()ですでに使用が重複していました。それだけでなく、絶対的な意味ではなく、既存の色に関連して変更を加えるのに適しているため、color.scale()を使用する方が良い場合が多くあります。これは、adjust-hue()、saturate()、desaturate()、lighten()、darken()、opacify()、fade-in()、transparentize()、およびfade-out()が削除されることを意味します。これらの関数は、その使用がすでに推奨されていなかったため、モジュールスコープの対応物を持っていなかったことに注意してください。

Playground

SCSS構文

@use "sass:color";

$color: #c71585;
@debug color.adjust($color, $lightness: 15%, $space: hsl);
@debug color.adjust($color, $lightness: 15%, $space: oklch);
@debug color.scale($color, $lightness: 15%, $space: oklch);
Playground

Sass構文

@use "sass:color"

$color: #c71585
@debug color.adjust($color, $lightness: 15%, $space: hsl)
@debug color.adjust($color, $lightness: 15%, $space: oklch)
@debug color.scale($color, $lightness: 15%, $space: oklch)

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

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

まず、削除される予定の関数のすべての使用に対して非推奨警告を発行します。 Dart Sass 2.0.0では、これらの関数は完全に削除されます。モジュールスコープバージョンの呼び出しを試みるとエラーがスローされますが、グローバル関数はプレーンなCSS関数として扱われ、プレーンな文字列として出力されます。

Sassマイグレーターを使用して、非推奨の APIから新しい代替APIに自動的に移行できます。

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

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オプションを使用して、その特定の非推奨に関する警告を非表示にできます。