重大变化:严格的函数单元
各种内置函数将变得更加严格,它们允许使用哪些单位,并且将更一致地处理这些单位。这使得 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.
SCSS Syntax
@use "sass:math";
// Future Sass, doesn't work yet!
@debug math.random(100px); // 42px
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.