内置模块 Built-In Modules

⚠️ 注意！

在引入 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 模块 提供对 numbers 进行操作的函数。
• sass:string 模块 可以轻松组合、搜索或拆分 strings。
• sass:color 模块 根据现有的 sass:color 模块 生成新的 colors，使构建颜色主题变得容易。
• sass:list 模块 允许您访问和修改 lists 中的值。
• sass:map 模块 可以在 map 中查找与键关联的值，等等 更多的。
• sass:selector 模块 提供对 Sass 强大的选择器引擎的访问。
• sass:meta 模块 公开了 Sass 内部工作的细节。

Global Functions

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 通道的颜色。

色调是介于“0deg”和“360deg”(含)之间的数字，可以没有单位。 饱和度和亮度是介于“0%”和“100%”(含)之间的数字，可能_not_没有单位。 Alpha 通道可以指定为 0 到 1(含)之间的无单位数字，或 0% 到 100%(含)之间的百分比。

💡 有趣的事实：

您可以传递 特殊函数，例如 calc() 或 var() 来代替 hsl() 的任何参数。 您甚至可以使用 var() 代替多个参数，因为它可能被多个值替换！ 当以这种方式调用颜色函数时，它会使用与调用时相同的签名返回一个不带引号的字符串。

@debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%); // hsla(var(--peach), 20%)

⚠️ Heads up!

Sass’s special parsing rules for slash-separated values make it difficult to pass variables for $lightness or $alpha when using the hsl($hue $saturation $lightness / $alpha) signature. Consider using hsl($hue, $saturation, $lightness, $alpha) instead.

@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)

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

如果 $condition 为 truthy，则返回 $if-true，否则返回 $if-false。
此函数的特殊之处在于它甚至不会评估未返回的参数，因此即使未使用的参数会引发错误，调用它也是安全的。

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

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

Compatibility (Level 4 Syntax): Dart Sass since 1.15.0 | LibSass ✗ | Ruby Sass ✗

Compatibility (Percent Alpha): Dart Sass ✓ | LibSass ✗ | Ruby Sass since 3.7.0

If $red, $green, $blue, and optionally $alpha are passed, returns a color with the given red, green, blue, and alpha channels.

每个通道都可以指定为 0 到 255(含)之间的 unitless 数字，或 0% 到 100%(含)之间的百分比。 Alpha 通道可以指定为 0 到 1(含)之间的无单位数字，或 0% 到 100%(含)之间的百分比。

💡 有趣的事实：

您可以传递 特殊函数，例如 calc() 或 var() 来代替 rgb() 的任何参数。 您甚至可以使用 var() 代替多个参数，因为它可能被多个值替换！ 当以这种方式调用颜色函数时，它会使用与调用时相同的签名返回一个不带引号的字符串。

@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)

⚠️ Heads up!

Sass’s special parsing rules for slash-separated values make it difficult to pass variables for $blue or $alpha when using the rgb($red $green $blue / $alpha) signature. Consider using rgb($red, $green, $blue, $alpha) instead.

@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，这将返回带有给定 $alpha 通道的 $color 而不是其原始的 alpha 通道。

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