内置模块

Dart Sass: 自 1.23.0 起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支持使用 @use 加载内置模块。其他实现的用户必须使用全局名称调用函数。

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

⚠️ 注意！

在 Sass 模块系统引入之前，所有 Sass 函数始终在全局范围内可用。许多函数仍然具有全局别名（这些在它们的文档中列出）。Sass 团队不鼓励使用它们，并且最终会弃用它们，但目前它们仍然可以与旧版 Sass 版本和 LibSass（它还不支持模块系统）兼容。

一些函数只在新的模块系统中全局可用，要么是因为它们具有特殊的评估行为（if()），要么是因为它们在内置 CSS 函数之上添加了额外的行为（rgb() 和 hsl()）。这些不会被弃用，可以随意使用。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法@use "sass:color";

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

       游乐场Sass 语法@use "sass:color"

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

CSS 输出.button {
  color: #6b717f;
  border: 1px solid rgb(135.1641025641, 140.8256410256, 154.0358974359);
}

Sass 提供以下内置模块

sass:math 模块提供对数字进行操作的函数。
sass:string 模块使得组合、搜索或拆分字符串变得容易。
sass:color 模块基于现有颜色生成新的颜色，从而轻松构建颜色主题。
sass:list 模块使您可以访问和修改列表中的值。
sass:map 模块使您可以查找与映射中的键关联的值，以及更多内容。
sass:selector 模块提供对 Sass 强大的选择器引擎的访问。
sass:meta 模块公开了 Sass 内部工作原理的详细信息。

全局函数全局函数永久链接

💡 趣闻

您可以将特殊函数（如 calc() 或 var()）传递给全局颜色构造函数的任何参数。您甚至可以将 var() 用于多个参数，因为它可能会被多个值替换！当以这种方式调用颜色函数时，它将使用调用它的相同签名返回一个未引用的字符串。

SCSS

Sass

     游乐场SCSS 语法@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

     游乐场Sass 语法@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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

以给定的颜色空间和给定的通道值返回颜色。

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

如果任何颜色通道超出 0 到 1 的范围，则表示颜色超出了其颜色空间的标准色域。

  SCSS

  Sass

       游乐场SCSS 语法@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%)

       游乐场Sass 语法@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

Dart Sass: 自 1.15.0 起
LibSass: ✗
Ruby Sass: ✗

LibSass 和 Ruby Sass 仅支持以下签名

hsl($hue, $saturation, $lightness)
hsla($hue, $saturation, $lightness, $alpha)

请注意，对于这些实现，如果使用函数名称 hsla()，则 $alpha 参数是必需的，如果使用函数名称 hsl()，则禁止。

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 自 3.7.0 起

LibSass 和 Ruby Sass 的旧版本不支持以百分比指定的 Alpha 值。

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

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

超出 0deg 和 360deg 的色相等效于 $hue % 360deg。小于 0% 的饱和度将被限制为 0%。高于 100% 的饱和度或超出 0% 和 100% 的亮度都是允许的，它们代表超出标准 RGB 色域的颜色。

⚠️ 注意！

Sass 的特殊解析规则用于斜杠分隔的值，使得在使用 hsl($hue $saturation $lightness / $alpha) 签名时难以为 $lightness 或 $alpha 传递变量。请考虑使用 hsl($hue, $saturation, $lightness, $alpha) 代替。

  SCSS

  Sass

       游乐场SCSS 语法@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)

       游乐场Sass 语法@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)

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

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

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

  SCSS

  Sass

       游乐场SCSS 语法@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       游乐场Sass 语法@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

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

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

超出 0deg 和 360deg 的色相等效于 $hue % 360deg。如果 $whiteness + $blackness > 100%，则这两个值将被缩放，以使它们加起来等于 100%。如果 $whiteness、$blackness 或两者都小于 0%，则表示颜色超出了标准 RGB 色域。

⚠️ 注意！

color.hwb() 变体已弃用。新的 Sass 代码应使用全局 hwb() 函数代替。

  SCSS

  Sass

       游乐场SCSS 语法@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

       游乐场Sass 语法@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。

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

  SCSS

  Sass

       游乐场SCSS 语法@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

       游乐场Sass 语法@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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

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

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

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

  SCSS

  Sass

       游乐场SCSS 语法@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);

       游乐场Sass 语法@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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

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

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

超出 0% 和 100% 范围的亮度将被限制在这个范围内。低于 0 的色度将被限制为 0，高于 150 的色度表示颜色超出了标准 CIELAB 色域。超出 0deg 和 360deg 的色相等效于 $hue % 360deg。

  SCSS

  Sass

       游乐场SCSS 语法@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);

       游乐场Sass 语法@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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

返回具有给定感知均匀亮度、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 色域。

  SCSS

  Sass

       游乐场SCSS 语法@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)

       游乐场Sass 语法@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

Dart Sass: 自 1.78.0 起
LibSass: ✗
Ruby Sass: ✗

返回一个具有给定[感知上统一的亮度、色度和色调]以及给定 alpha 通道的颜色。

亮度是一个介于 0% 和 100%（包含）之间的数字，可以无单位。色度通道可以指定为介于 0 和 0.4（包含）之间的无单位数字，或者介于 0% 和 100%（包含）之间的百分比。色调是一个介于 0deg 和 360deg（包含）之间的数字，可以无单位。alpha 通道可以指定为介于 0 和 1（包含）之间的无单位数字，或者介于 0% 和 100%（包含）之间的百分比。

超出 0% 和 100% 范围的亮度将被限制在该范围内。低于 0 的色度将被限制为 0，高于 0.4 的色度代表标准 Oklab 色域之外的颜色。超出 0deg 和 360deg 的色调等效于 $hue % 360deg。

  SCSS

  Sass

       游乐场SCSS 语法@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);

       游乐场Sass 语法@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

Dart Sass: 自 1.15.0 起
LibSass: ✗
Ruby Sass: ✗

LibSass 和 Ruby Sass 仅支持以下签名

rgb($red, $green, $blue)
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)

注意，对于这些实现，如果使用函数名 rgba()，则 $alpha 参数是必需的，而如果使用函数名 rgb()，则禁止。

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 自 3.7.0 起

LibSass 和 Ruby Sass 的旧版本不支持以百分比指定的 Alpha 值。

如果传递了 $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) 代替。

  SCSS

  Sass

       游乐场SCSS 语法@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)

       游乐场Sass 语法@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 通道。

  SCSS

  Sass

       游乐场SCSS 语法@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

       游乐场Sass 语法@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366