重大变更:严格的函数单位

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

色相色相 permalink

Compatibility:
Dart Sass
since 1.32.0
LibSass
Ruby Sass

在指定颜色的色相时,CSS 允许任何角度单位deggradradturn)。它还允许无单位数字,并将其解释为 deg。历史上,Sass 允许任何单位,并将其解释为 deg。这尤其有问题,因为这意味着有效的 CSS 表达式 hsl(0.5turn, 100%, 50%) 将被 Sass 允许,但会被完全错误地解释。

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

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.32.0
LibSass
Ruby Sass

起初,如果你传递了一个非 deg 单位的数字作为色相到任何函数,Sass 只会发出弃用警告。传递无单位数字仍然是允许的。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
since 1.52.1
LibSass
Ruby Sass

接下来,我们改变了色相参数的角度单位处理方式,以匹配 CSS 规范。这意味着带有 gradradturn 单位的数字将转换为 deg0.5turn 将转换为 180deg100grad 将转换为 90deg,以此类推。

因为这个更改对于保持 CSS 兼容性是必要的,根据 Dart Sass 兼容性政策,它只进行了次要版本号的更新。然而,它尽可能地改变了最少的行为,以确保 Sass 根据 CSS 规范解释所有有效的 CSS

第 3 阶段第 3 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

最后,在 Dart Sass 2.0.0 中,如果传递了非角度单位的色相参数,颜色函数将引发错误。无单位的色相仍然是允许的。

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

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

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

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.32.0
LibSass
Ruby Sass

目前,如果你传递了无单位或非 % 单位的数字作为任何函数的亮度或饱和度,Sass 只会发出弃用警告。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

在 Dart Sass 2.0.0 中,如果传递了无单位或非 % 单位的饱和度或亮度参数,颜色函数将引发错误。

透明度透明度 permalink

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

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

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.56.0
LibSass
Ruby Sass

目前,如果你传递了任何单位(包括 %)的数字作为 color.change()color.adjust() 的透明度值,Sass 只会发出弃用警告。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

接下来,我们将改变 color.change()color.adjust() 的透明度参数的 % 单位处理方式。带有 % 单位的透明度将除以 100%,将其转换为 0 到 1 之间的无单位数字。

因为这个更改是一个改进一致性的错误修复,它将只进行次要版本号的更新。它将在第 1 阶段发布后至少三个月进行更改,以给用户时间调整他们的代码并避免这个错误。

第 3 阶段第 3 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

最后,在 Dart Sass 2.0.0 中,如果传递了非 % 单位的透明度参数,color.change()color.adjust() 将引发错误。无单位的透明度仍然是允许的。

math.random()math.random() permalink

math.random() 函数历史上忽略了 $limit 中的单位,并返回一个无单位的值。例如 math.random(100px) 会丢弃 "px" 并返回类似 42 的值。

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

Playground

SCSS Syntax

@use "sass:math";

// 未来的 Sass,目前还不能工作!
@debug math.random(100px); // 42px
Playground

Sass Syntax

@use "sass:math"

// 未来的 Sass,目前还不能工作!
@debug math.random(100px)  // 42px

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.54.5
LibSass
Ruby Sass

目前,如果你传递带有单位的 $limitmath.random(),Sass 会发出弃用警告。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

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

第 3 阶段第 3 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

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

权重权重 permalink

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

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.56.0
LibSass
Ruby Sass

目前,如果你传递无单位或非 % 单位的 $weightcolor.mix()color.invert(),Sass 会发出弃用警告。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

在 Dart Sass 2.0.0 中,如果传递了无单位或非 % 单位的 $weightcolor.mix()color.invert() 将引发错误。

索引索引 permalink

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

第 1 阶段第 1 阶段 permalink

Compatibility:
Dart Sass
since 1.56.0
LibSass
Ruby Sass

目前,如果你传递带有单位的索引 $nlist.nth()list.set-nth(),Sass 会发出弃用警告。

第 2 阶段第 2 阶段 permalink

Compatibility:
Dart Sass
LibSass
Ruby Sass

在 Dart Sass 2.0.0 中,如果传递了带有单位的索引 $nlist.nth()list.set-nth() 将引发错误。

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.