重大变化：严格的函数单元

各种内置函数将变得更加严格，它们允许使用哪些单位，并且将更一致地处理这些单位。这使得 Sass 与 CSS 规范更加兼容，并有助于更快地捕获错误。

色调色调 permalink

¥Hue

兼容性:
Dart Sass
since 1.32.0
LibSass
✗
Ruby Sass
✗

当指定颜色的色调时，CSS 允许任何 角度单位（deg、grad、rad 或 turn）。它还允许无单位数字，被解释为 deg。从历史上看，Sass 允许任何单位，并将其解释为 deg。这是特别有问题的，因为这意味着 Sass 允许有效的 CSS 表达式 hsl(0.5turn, 100%, 50%) 但解释完全错误。

¥When specifying a color’s hue, CSS allows any angle unit (deg, grad, rad, or turn). It also allows a unitless number, which is interpreted as deg. Historically, Sass has allowed any unit, and interpreted it as deg. This is particularly problematic because it meant that the valid CSS expression hsl(0.5turn, 100%, 50%) would be allowed by Sass but interpreted entirely wrong.

为了解决这个问题并使 Sass 符合 CSS 规范，我们分多个阶段进行更改：

¥To fix this issue and bring Sass in line with the CSS spec, we’re making changes in multiple phases:

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.32.0
LibSass
✗
Ruby Sass
✗

起初，如果你将单位不是 deg 的数字作为色调传递给任何函数，Sass 只会发出弃用警告。仍然允许传递无单位数字。

¥At first, Sass just emitted a deprecation warning if you passed a number with a unit other than deg as a hue to any function. Passing a unitless number is still allowed.

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
since 1.52.1
LibSass
✗
Ruby Sass
✗

接下来，我们更改了色调参数处理角度单位的方式，以匹配 CSS 规范。这意味着具有 grad、rad 或 turn 单位的数字将转换为 deg：0.5turn 将转换为 180deg，100grad 将转换为 90deg，依此类推。

¥Next, we changed the way angle units are handled for hue parameters to match the CSS spec. This means that numbers with grad, rad, or turn units will be converted to deg: 0.5turn will be converted to 180deg, 100grad will be converted to 90deg, and so on.

由于此更改对于保持 CSS 兼容性是必要的，因此根据 Dart Sass 兼容性政策，它仅进行了较小的版本提升。但是，它会尽可能少地更改行为，以确保 Sass 根据 CSS 规范解释所有有效的 CSS。

¥Because this change is necessary to preserve CSS compatibility, according to the Dart Sass compatibility policy it was made with only a minor version bump. However, it changes as little behavior as possible to ensure that Sass interprets all valid CSS according to the CSS spec.

阶段 3阶段 3 permalink

¥Phase 3

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

最后，在 Dart Sass 2.0.0 中，如果颜色函数传递带有非角度单位的色调参数，则会抛出错误。无单位色调仍然是允许的。

¥Finally, in Dart Sass 2.0.0 color functions will throw errors if they’re passed a hue parameter with a non-angle unit. Unitless hues will still be allowed.

饱和度和亮度饱和度和亮度 permalink

¥Saturation and Lightness

当指定 HSL 颜色的饱和度和亮度时，CSS 仅允许 % 单位。即使是无单位的数字也是不允许的（与色调不同）。从历史上看，Sass 允许任何单位，并将其解释为 %。你甚至可以写 hsl(0, 100px, 50s)，Sass 会返回颜色 red。

¥When specifying an HSL color’s saturation and lightness, CSS only allows % units. Even unitless numbers aren’t allowed (unlike for the hue). Historically, Sass has allowed any unit, and interpreted it as %. You could even write hsl(0, 100px, 50s) and Sass would return the color red.

为了解决这个问题并使 Sass 符合 CSS 规范，我们分两个阶段进行更改：

¥To fix this issue and bring Sass in line with the CSS spec, we’re making changes in two phases:

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.32.0
LibSass
✗
Ruby Sass
✗

目前，如果你将没有单位或 % 以外的单位的数字作为亮度或饱和度传递给任何函数，Sass 只会发出弃用警告。

¥Currently, Sass just emits a deprecation warning if you pass a number with no unit or a unit other than % as a lightness or saturation to any function.

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

在 Dart Sass 2.0.0 中，如果颜色函数传递了没有单位或非 % 单位的饱和度或亮度参数，则会抛出错误。

¥In Dart Sass 2.0.0 color functions will throw errors if they’re passed a saturation or lightness parameter with no unit or a non-% unit.

AlphaAlpha permalink

当指定颜色的 alpha 值时，CSS（从 颜色级别 4 开始）允许 0 到 1 之间的无单位值或 0% 到 100% 之间的 % 值。在大多数情况下，Sass 遵循这种行为，但函数 color.adjust() 和 color.change() 历史上允许任何单位，并将其解释为无单位。你甚至可以编写 color.change(red, $alpha: 1%)，Sass 将返回不透明颜色 red。

¥When specifying a color’s alpha value, CSS (as of Colors Level 4) allows either unitless values between 0 and 1 or % values between 0% and 100%. In most cases Sass follows this behavior, but the functions color.adjust() and color.change() have historically allowed any unit, and interpreted it as unitless. You could even write color.change(red, $alpha: 1%) and Sass would return the opaque color red.

为了解决这个问题并使 Sass 符合 CSS 规范，我们分三个阶段进行更改：

¥To fix this issue and bring Sass in line with the CSS spec, we’re making changes in three phases:

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.56.0
LibSass
✗
Ruby Sass
✗

目前，如果你将任何单位（包括 %）的数字作为 color.change() 或 color.adjust() 的 alpha 值传递，Sass 只会发出弃用警告。

¥Currently, Sass just emits a deprecation warning if you pass a number with any unit, including %, as an alpha value to color.change() or color.adjust().

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

接下来，我们将更改 % 单位对 color.change() 和 color.adjust() 的 alpha 参数的处理方式。单位为 % 的 Alpha 将除以 100%，将其转换为 0 到 1 之间的无单位数字。

¥Next, we’ll change the way % units are handled for the alpha argument to color.change() and color.adjust(). Alphas with unit % will be divided by 100%, converting them to unitless numbers between 0 and 1.

由于此更改是一个错误修复，旨在提高与其他 Sass 函数的一致性，因此仅会进行较小的版本更新。第一阶段发布后至少三个月内会进行更改，以便用户有时间调整代码并避免错误。

¥Because this change is a bug fix that improves consistency with other Sass functions, it will be made with only a minor version bump. It will be changed at minimum three months after Phase 1 is released, to give users time to adjust their code and avoid the bug.

阶段 3阶段 3 permalink

¥Phase 3

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

最后，在 Dart Sass 2.0.0 中，如果 color.change() 和 color.adjust() 传递带有非 % 单位的 alpha 参数，它们将抛出错误。无单位的 alpha 仍然被允许。

¥Finally, in Dart Sass 2.0.0 color.change() and color.adjust() will throw errors if they’re passed an alpha parameter with a non-% unit. Unitless alphas will still be allowed.

math.random()math.random() permalink

math.random() 函数 历来忽略 $limit 中的单位并返回无单位值。例如，math.random(100px) 会删除 "像素" 并返回类似 42 的值。

¥The math.random() function has historically ignored units in $limit and returned a unitless value. For example math.random(100px) would drop "px" and return a value like 42.

Sass 的未来版本将停止忽略 $limit 参数的单位，并返回具有相同单位的随机整数。

¥A future version of Sass will stop ignoring units for the $limit argument and return a random integer with the same units.

Playground

SCSS Syntax

@use "sass:math";

// Future Sass, doesn't work yet!
@debug math.random(100px); // 42px
Playground

Sass Syntax

@use "sass:math"

// Future Sass, doesn't work yet!
@debug math.random(100px)  // 42px

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.54.5
LibSass
✗
Ruby Sass
✗

目前，如果你将带有单位的 $limit 传递给 math.random()，Sass 会发出弃用警告。

¥Currently, Sass emits a deprecation warning if you pass a $limit with units to math.random().

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

在 Dart Sass 2.0.0 中，传递带有单位的 $limit 数字将是一个错误。

¥In Dart Sass 2.0.0, passing a $limit number with units will be an error.

阶段 3阶段 3 permalink

¥Phase 3

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

在 Dart Sass 2.0.0 之后的次要版本中，将再次允许将带单位的 $limit 数字传递给 math.random() 函数。它将返回一个与 $limit 单位相同的随机整数，而不是无单位的数字。

¥In a minor release after Dart Sass 2.0.0, passing a $limit number with units to the math.random() function will be allowed again. It will return a random integer the same units as $limit, instead of a unitless number.

重量重量 permalink

¥Weight

color.mix() 函数 和 color.invert() 函数 历来都忽略了 $weight 参数中的单位，尽管该参数在概念上代表百分比。Sass 的未来版本将需要单位 %。

¥The color.mix() function and color.invert() function have both historically ignored units in their $weight arguments, despite that argument conceptually representing a percentage. A future version of Sass will require the unit %.

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.56.0
LibSass
✗
Ruby Sass
✗

目前，如果你传递没有单位或包含 % 到 color.mix() 或 color.invert() 以外的单位的 $weight，Sass 会发出弃用警告。

¥Currently, Sass emits a deprecation warning if you pass a $weight with no units or with units other than % to color.mix() or color.invert().

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

在 Dart Sass 2.0.0 中，如果 color.mix() 和 color.invert() 传递了没有单位的 $weight 或非 % 单位，那么 color.mix() 和 color.invert() 将抛出错误。

¥In Dart Sass 2.0.0, color.mix() and color.invert() will throw errors if they’re passed a $weight with no unit or a non-% unit.

索引索引 permalink

¥Index

list.nth() 函数 和 list.set-nth() 函数 历来在其 $n 参数中都忽略了单位。Sass 的未来版本将禁止任何单元。

¥The list.nth() function and list.set-nth() function have both historically ignored units in their $n arguments. A future version of Sass will forbid any units.

阶段 1阶段 1 permalink

¥Phase 1

兼容性:
Dart Sass
since 1.56.0
LibSass
✗
Ruby Sass
✗

目前，如果你传递没有单位或包含 % 到 color.mix() 或 color.invert() 以外的单位的 $weight，Sass 会发出弃用警告。

¥Currently, Sass emits a deprecation warning if you pass a $weight with no units or with units other than % to color.mix() or color.invert().

阶段 2阶段 2 permalink

¥Phase 2

兼容性:
Dart Sass
✗
LibSass
✗
Ruby Sass
✗

在 Dart Sass 2.0.0 中，如果 list.nth() 和 list.set-nth() 传递带有单位的索引 $n，它们将抛出错误。

¥In Dart Sass 2.0.0, list.nth() and list.set-nth() will throw errors if they’re passed an index $n with a unit.

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 flag on the command line, or 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 --quiet-deps flag on the command line, or 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 --silence-deprecation flag on the command line, or the silenceDeprecations option in the JavaScript API.