Lzh on GitHub

概览

Sass 提供了许多内置模块，其中包含有用的函数（以及偶尔的混合宏）。这些模块可以像任何用户定义的样式表一样使用 @use 规则加载，并且它们的函数可以像任何其他模块成员一样调用。所有内置模块的 URL 都以 sass: 开头，以表明它们是 Sass 本身的一部分。

Sass 提供了许多内置模块，其中包含有用的函数（以及偶尔的混合宏）。这些模块可以像任何用户定义的样式表一样使用 @use 规则加载，并且它们的函数可以像任何其他模块成员一样调用。所有内置模块的 URL 都以 sass: 开头，以表明它们是 Sass 本身的一部分。

在 Sass 模块系统引入之前，所有 Sass 函数都是全局可用的。许多函数仍然有全局别名（这些在它们的文档中有列出）。Sass 团队不鼓励使用它们，并最终将弃用它们，但目前为了与旧版 Sass 和 LibSass（尚不支持模块系统）兼容，它们仍然可用。少数函数即使在新的模块系统中也只全局可用，要么是因为它们具有特殊的评估行为 (if())，要么是因为它们在内置 CSS 函数 (rgb() 和 hsl()) 之上添加了额外行为。这些将不会被弃用，可以自由使用。
@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

Sass 提供以下内置模块：

  • sass:math 模块提供对数字进行操作的函数。
  • sass:string 模块可以轻松地组合、搜索或拆分字符串。
  • sass:color 模块根据现有颜色生成新颜色，使其易于构建颜色主题。
  • sass:list 模块让你访问和修改列表中的值。
  • sass:map 模块使得可以查找与映射中键关联的值，以及更多功能。
  • sass:selector 模块提供对 Sass 强大的选择器引擎的访问。
  • sass:meta 模块暴露 Sass 内部工作的细节。

全局函数

你可以将 calc() 或 var() 等特殊函数作为参数传递给全局颜色构造函数，以代替任何参数。你甚至可以用 var() 代替多个参数，因为它可能会被多个值替换！当以这种方式调用颜色函数时，它会返回一个使用与调用它时相同的签名的不带引号的字符串。
@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

color($space $channel1 $channel2 $channel3)
color($space $channel1 $channel2 $channel3 / $alpha) //=> color

返回给定颜色空间中具有给定通道值的颜色。

这支持 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz 和 xyz-d50 颜色空间，以及 xyz 的别名 xyz-d65。对于所有空间，通道是 0 到 1（包含）之间的数字或 0% 到 100%（包含）之间的百分比。

如果任何颜色通道超出 0 到 1 的范围，这表示该颜色空间的标准色域之外的颜色。

@debug color(srgb 0.1 0.6 1); // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%); // color(xyz 0.3 0 0.9 / 50%)

hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color

返回具有给定色相、饱和度和亮度以及给定 alpha 通道的颜色。

色相是 0 度到 360 度（包含）之间的数字，可以无单位。饱和度和亮度通常是 0% 到 100%（包含）之间的数字，不能无单位。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0 度到 360 度范围的色相等同于 $hue % 360deg。小于 0% 的饱和度被钳制为 0%。高于 100% 的饱和度或超出 0% 到 100% 范围的亮度都允许，并表示标准 RGB 色域之外的颜色。

Sass 对斜杠分隔值的特殊解析规则使得在使用 hsl($hue $saturation $lightness / $alpha) 签名时难以传递 $lightness 或 $alpha 的变量。考虑使用 hsl($hue, $saturation, $lightness, $alpha)。
@debug hsl(210deg 100% 20%); // #036
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(241.74, 235.552, 227.46, 0.2)

hwb($hue $whiteness $blackness)
hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

返回具有给定色相、白度和黑度以及给定 alpha 通道的颜色。

色相是 0 度到 360 度（包含）之间的数字，可以无单位。白度和黑度通常是 0% 到 100%（包含）之间的数字，不能无单位。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0 度到 360 度范围的色相等同于 $hue % 360deg。如果 $whiteness + $blackness > 100%，这两个值将按比例缩放，使其总和为 100%。如果 $whiteness、$blackness 或两者都小于 0%，这表示标准 RGB 色域之外的颜色。

color.hwb() 变体已被弃用。新的 Sass 代码应该使用全局 hwb() 函数。
@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

if($condition, $if-true, $if-false)

如果 $condition 为真值，则返回 $if-true，否则返回 $if-false。

此函数的特殊之处在于它甚至不会评估未返回的参数，因此即使未使用的参数会抛出错误，调用它也是安全的。

@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

lab($lightness $a $b)
lab($lightness $a $b / $alpha) //=> color

返回具有给定 亮度、a、b 和 alpha 通道的颜色。

亮度是 0% 到 100%（包含）之间的数字，可以无单位。a 和 b 通道可以指定为 -125 到 125（包含）之间的无单位数字，或 -100% 到 100%（包含）之间的百分比。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0% 到 100% 范围的亮度将被钳制在该范围内。如果 a 或 b 通道超出 -125 到 125 的范围，这表示标准 CIELAB 色域之外的颜色。

@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);

lch($lightness $chroma $hue)
lch($lightness $chroma $hue / $alpha) //=> color

返回具有给定 亮度、色度和色相 以及给定 alpha 通道的颜色。

亮度是 0% 到 100%（包含）之间的数字，可以无单位。色度通道可以指定为 0 到 150（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。色相是 0 度到 360 度（包含）之间的数字，可以无单位。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0% 到 100% 范围的亮度将被钳制在该范围内。低于 0 的色度被钳制为 0，高于 150 的色度表示标准 CIELAB 色域之外的颜色。超出 0 度到 360 度范围的色相等同于 $hue % 360deg。

@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);

oklab($lightness $a $b)
oklab($lightness $a $b / $alpha) //=> color

返回具有给定感知均匀亮度、a、b 和 alpha 通道的颜色。

亮度是 0% 到 100%（包含）之间的数字，可以无单位。a 和 b 通道可以指定为 -0.4 到 0.4（包含）之间的无单位数字，或 -100% 到 100%（包含）之间的百分比。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0% 到 100% 范围的亮度将被钳制在该范围内。如果 a 或 b 通道超出 -0.4 到 0.4 的范围，这表示标准 Oklab 色域之外的颜色。

@debug oklab(50% -0.1 0.15); // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5); // oklab(80% 0 0.08 / 0.5)

oklch($lightness $chroma $hue)
oklch($lightness $chroma $hue / $alpha) //=> color

返回具有给定 感知均匀亮度、色度和色相 以及给定 alpha 通道的颜色。

亮度是 0% 到 100%（包含）之间的数字，可以无单位。色度通道可以指定为 0 到 0.4（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。色相是 0 度到 360 度（包含）之间的数字，可以无单位。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

超出 0% 到 100% 范围的亮度将被钳制在该范围内。低于 0 的色度被钳制为 0，高于 0.4 的色度表示标准 Oklab 色域之外的颜色。超出 0 度到 360 度范围的色相等同于 $hue % 360deg。

@debug oklch(50% 0.3 270deg); // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5); // oklch(80% 0.2 72deg / 0.5);

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color

如果传递了 $red、$green、$blue 以及可选的 $alpha，则返回具有给定红色、绿色、蓝色和 alpha 通道的颜色。

每个通道都可以指定为 0 到 255（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。alpha 通道可以指定为 0 到 1（包含）之间的无单位数字，或 0% 到 100%（包含）之间的百分比。

如果任何颜色通道超出 0 到 255 的范围，这表示该颜色空间的标准 RGB 色域之外的颜色。

Sass 对斜杠分隔值的特殊解析规则使得在使用 rgb($red $green $blue / $alpha) 签名时难以传递 $blue 或 $alpha 的变量。考虑使用 rgb($red, $green, $blue, $alpha)。
@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

如果传递了 $color 和 $alpha，则此函数返回 $color，但使用给定的 $alpha 通道代替其原始 alpha 通道。

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366