重要な変更: 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は null
の alpha
値を不透明な色として解釈し続けます。ただし、作者が代わりに明示的に alpha
1を渡すことを推奨するために、非推奨の警告が表示されます。