重大变更:颜色 JS API

JS 颜色 API 的某些方面是基于所有颜色都是相互兼容的假设设计的,但现在 Sass 支持 CSS Color 4 的所有颜色空间后,这些方面不再有意义。

就像Sass 的颜色函数正在被弃用一样,随着对CSS Color 4的支持,操作颜色的 JS API 的某些角落也被弃用了。

color.change() 现在需要一个 space 参数来进行跨空间更改color.change() 现在需要一个 space 参数来进行跨空间更改 permalink

以前,color.change() 方法只接受 RGBHSLHWB 空间的通道名称。只要这些通道没有跨空间混合(例如同时更改 redhue),Sass 就能推断出预期的空间。

在 Color 4 中,颜色空间不再仅从其通道名称就能明确。许多空间有范围不同的 redgreenblue 通道;许多空间有产生非常不同色轮的 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}) 总是指具有 redgreenblue 通道的任何颜色的原生红色通道。

为了向后兼容,如果你正在更改传统颜色的传统通道,Sass 仍将自动为你转换颜色。但是,这种行为已被弃用。为了安全起见,除非你确定颜色已经在要更改通道的颜色空间中,否则你应该始终传递 space 参数。

null 通道值null 通道值 permalink

CSS Color 4 的主要变化之一是新的"缺失"通道概念。例如,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

Compatibility:
Dart Sass
since 1.79.0
LibSass
Ruby Sass

首先,我们将为所有计划更改的这些 API 的使用情况发出弃用警告。在 Dart Sass 2.0.0 中,重大变更将完全生效,旧的行为将不再像以前那样工作。

Can I Silence the Warnings?Can I Silence the Warnings? permalink

Sass provides a powerful suite of options for managing which deprecation warnings you see and when.

Terse and Verbose ModeTerse and Verbose Mode permalink

By default, Sass runs in terse mode, where it will only print each type of deprecation warning five times before it silences additional warnings. This helps ensure that users know when they need to be aware of an upcoming breaking change without creating an overwhelming amount of console noise.

If you run Sass in verbose mode instead, it will print every deprecation warning it encounters. This can be useful for tracking the remaining work to be done when fixing deprecations. You can enable verbose mode using the verbose option in the JavaScript API.

⚠️ Heads up!

When running from the JS API, Sass doesn’t share any information across compilations, so by default it’ll print five warnings for each stylesheet that’s compiled. However, you can fix this by writing (or asking the author of your favorite framework’s Sass plugin to write) a custom Logger that only prints five errors per deprecation and can be shared across multiple compilations.

Silencing Deprecations in DependenciesSilencing Deprecations in Dependencies permalink

Sometimes, your dependencies have deprecation warnings that you can’t do anything about. You can silence deprecation warnings from dependencies while still printing them for your app using the quietDeps option in the JavaScript API.

For the purposes of this flag, a "dependency" is any stylesheet that’s not just a series of relative loads from the entrypoint stylesheet. This means anything that comes from a load path, and most stylesheets loaded through custom importers.

Silencing Specific DeprecationsSilencing Specific Deprecations permalink

If you know that one particular deprecation isn’t a problem for you, you can silence warnings for that specific deprecation using the silenceDeprecations option in the JavaScript API.