内建模块

Dart·Sass（Dart Sass）: 从1.23.0开始
LibSass: ✗
rubySass: ✗

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

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

Head️抬头！

在引入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 #878d9a;
}

Sass提供了以下内置模块：

该sass:math模块提供对数字进行运算的功能。
该sass:string模块使组合，搜索或拆分字符串变得容易。
该sass:color模块根据现有颜色生成新颜色，从而轻松构建颜色主题。
该sass:list模块使您可以访问和修改列表中的值。
该sass:map模块可以查找与map中的键关联的值，等等。
该sass:selector模块提供对Sass强大的选择器引擎的访问。
该sass:meta模块公开了Sass内部工作的细节。

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

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（Dart Sass）: 从 1.15.0开始
LibSass: ✗
rubySass: ✗

LibSass和Ruby Sass仅支持以下签名：

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

需要注意的是，这些具体实施中，$alpha参数要求，如果函数名hsla()被使用，并且禁止如果函数名称hsl()使用。

Dart·Sass（Dart Sass）: ✓
LibSass: ✗
rubySass: 从 3.7.0开始

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

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

色相是介于0deg和360deg（包括）之间的数字。饱和度和亮度是介于0%和100%（包括）之间的数字。所有这些数字可能是无单位的。可以将alpha通道指定为介于0和1（含）之间的无单位数，或介于0%和100% （含）之间的百分比。

???? 有趣的事实：

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

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

Head️抬头！

Sass 针对斜杠分隔值的特殊解析规则使使用签名时$lightness或传递签名$alpha时难以传递变量hsl($hue $saturation $lightness / $alpha)。考虑hsl($hue, $saturation, $lightness, $alpha) 改为使用。

SCSS
Sass
SCSS  语法@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)
Sass语法@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)

$if-true如果$condition为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

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（Dart Sass）: 从 1.15.0开始
LibSass: ✗
rubySass: ✗

LibSass和Ruby Sass仅支持以下签名：

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

需要注意的是，这些具体实施中，$alpha参数要求，如果函数名rgba()被使用，并且禁止如果函数名称rgb()使用。

Dart·Sass（Dart Sass）: ✓
LibSass: ✗
rubySass: 从 3.7.0开始

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

如果$red，$green，$blue，和任选的$alpha传递，返回给定的红色，绿色，蓝色和Alpha通道的颜色。

每个信道可以被指定为任一个无单位的 0和255（含）之间的数，或之间的百分比0%和100%（含）。可以将alpha通道指定为介于0和1（含）之间的无单位数，或介于0%和100% （含）之间的百分比。

???? 有趣的事实：

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

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

Head️抬头！

Sass 针对斜杠分隔值的特殊解析规则使使用签名时$blue或传递签名$alpha时难以传递变量rgb($red $green $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