重大变更:严格的函数单位
各种内置函数将在允许的单位上变得更加严格,并且将更一致地处理这些单位。这使得 Sass 更加兼容 CSS 规范,并有助于更快地捕获错误。
色相色相 permalink
- Dart Sass
- since 1.32.0
- LibSass
- ✗
- Ruby Sass
- ✗
在指定颜色的色相时,CSS 允许任何角度单位(deg
、grad
、rad
或 turn
)。它还允许无单位数字,并将其解释为 deg
。历史上,Sass 允许任何单位,并将其解释为 deg
。这尤其有问题,因为这意味着有效的 CSS 表达式 hsl(0.5turn, 100%, 50%)
将被 Sass 允许,但会被完全错误地解释。
为了解决这个问题并使 Sass 符合 CSS 规范,我们将分多个阶段进行更改:
第 1 阶段第 1 阶段 permalink
- Dart Sass
- since 1.32.0
- LibSass
- ✗
- Ruby Sass
- ✗
起初,如果你传递了一个非 deg
单位的数字作为色相到任何函数,Sass 只会发出弃用警告。传递无单位数字仍然是允许的。
第 2 阶段第 2 阶段 permalink
- Dart Sass
- since 1.52.1
- LibSass
- ✗
- Ruby Sass
- ✗
接下来,我们改变了色相参数的角度单位处理方式,以匹配 CSS 规范。这意味着带有 grad
、rad
或 turn
单位的数字将转换为 deg
:0.5turn
将转换为 180deg
,100grad
将转换为 90deg
,以此类推。
因为这个更改对于保持 CSS 兼容性是必要的,根据 Dart Sass 兼容性政策,它只进行了次要版本号的更新。然而,它尽可能地改变了最少的行为,以确保 Sass 根据 CSS 规范解释所有有效的 CSS。
第 3 阶段第 3 阶段 permalink
- 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
- Dart Sass
- since 1.32.0
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果你传递了无单位或非 %
单位的数字作为任何函数的亮度或饱和度,Sass 只会发出弃用警告。
第 2 阶段第 2 阶段 permalink
- 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
- Dart Sass
- since 1.56.0
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果你传递了任何单位(包括 %
)的数字作为 color.change()
或 color.adjust()
的透明度值,Sass 只会发出弃用警告。
第 2 阶段第 2 阶段 permalink
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
接下来,我们将改变 color.change()
和 color.adjust()
的透明度参数的 %
单位处理方式。带有 %
单位的透明度将除以 100%
,将其转换为 0 到 1 之间的无单位数字。
因为这个更改是一个改进一致性的错误修复,它将只进行次要版本号的更新。它将在第 1 阶段发布后至少三个月进行更改,以给用户时间调整他们的代码并避免这个错误。
第 3 阶段第 3 阶段 permalink
- 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
参数的单位,并返回具有相同单位的随机整数。
第 1 阶段第 1 阶段 permalink
- Dart Sass
- since 1.54.5
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果你传递带有单位的 $limit
给 math.random()
,Sass 会发出弃用警告。
第 2 阶段第 2 阶段 permalink
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,传递带有单位的 $limit
数字将是一个错误。
第 3 阶段第 3 阶段 permalink
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 之后的次要版本中,再次允许传递带有单位的 $limit
数字给 math.random()
函数。它将返回与 $limit
相同单位的随机整数,而不是无单位数字。
权重权重 permalink
color.mix()
函数和 color.invert()
函数历史上都忽略了其 $weight
参数中的单位,尽管该参数在概念上表示百分比。Sass 的未来版本将要求单位为 %
。
第 1 阶段第 1 阶段 permalink
- Dart Sass
- since 1.56.0
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果你传递无单位或非 %
单位的 $weight
给 color.mix()
或 color.invert()
,Sass 会发出弃用警告。
第 2 阶段第 2 阶段 permalink
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,如果传递了无单位或非 %
单位的 $weight
,color.mix()
和 color.invert()
将引发错误。
索引索引 permalink
list.nth()
函数和 list.set-nth()
函数历史上都忽略了其 $n
参数中的单位。Sass 的未来版本将禁止任何单位。
第 1 阶段第 1 阶段 permalink
- Dart Sass
- since 1.56.0
- LibSass
- ✗
- Ruby Sass
- ✗
目前,如果你传递带有单位的索引 $n
给 list.nth()
或 list.set-nth()
,Sass 会发出弃用警告。
第 2 阶段第 2 阶段 permalink
- Dart Sass
- ✗
- LibSass
- ✗
- Ruby Sass
- ✗
在 Dart Sass 2.0.0 中,如果传递了带有单位的索引 $n
,list.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.