Sass 内置模块

Sass 提供了许多内置模块，其中包含有用的功能（偶尔还有 mixin）。这些模块可以像任何用户定义的样式表一样使用 @use 规则加载，并且可以像任何其他模块成员一样调用它们的函数。所有内置模块 URL 都以 sass： 开头，表示它们是 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 

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

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

@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 则返回，否则返回。

此函数的特殊之处在于它甚至不评估未返回的参数，因此即使未使用的参数会引发错误，也可以安全地进行调用。

@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 

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

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

@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  语法
@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366