重要な変更: Nullのアルファ チャンネル

Dart Sass 1.64.3より前では、JSおよびDart APIにおいて、SassColor コンストラクタに null が渡された場合、1として扱われていました。これは現在非推奨です。ユーザーは代わりに明示的に1または undefined を渡す必要があります。

Sassは、CSS Color Module Level 4のサポート追加に取り組んでいます。このモジュールの変更点の1つは、「欠落コンポーネント」(missing components)の概念です。alpha のようなカラーコンポーネントが欠落している場合、ほとんどの場合0として扱われますが、別の色と補間される場合(グラデーションやアニメーションなど)、自動的に他の色の 値が使用されます。

JSおよびDart APIのユーザーが欠落しているチャンネルにアクセスして設定する方法が必要です。null は、それを行うための最も自然な方法です。ほとんどの場合、これは問題ではありません。不透明な色を作成しようとする呼び出し側は、通常、alpha パラメータを省略します(またはJSで undefined を渡します)。しかし、呼び出し側が明示的に null を渡している場合、それは最終的に不透明な色ではなく透明な色として扱われるようになります。

現在の動作を維持するには、alpha が設定されていない場合に明示的に1を渡すだけです。JS では

new sass.SassColor({
  red: 102,
  green: 51,
  blue: 153,
  alpha: alpha ?? 1,
});

そしてDartでは

sass.SassColor.rgb(102, 51, 153, alpha ?? 1);

💡 豆知識

Sass APIのTypeScript型は、すでに alpha として null を渡すことを禁止しています。 null は存在しないか、undefined か、Number である必要があります。しかし、Dart Sass 1.64.3より前では、TypeScriptを使用しておらず、実際に null を渡した場合でも、不透明な 色として扱われていました。

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

互換性
Dart Sass
1.64.3以降
LibSass
Ruby Sass

Dart Sass 1.64.3とCSS Colors Level 4のサポートの今後のリリースの間、Dart Sassは nullalpha 値を不透明な色として解釈し続けます。ただし、作者が代わりに明示的に alpha 1を渡すことを推奨するために、非推奨の警告が表示されます。