内置模块

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%);
}

.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 内部工作的细节。

全局函数

if()

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

hsl()和hsla()

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 度和 360 度）之间的数字，可以是无单位的。饱和度和亮度是介于 0%和 100%（包括 0%和 100%）之间的数字，不能是无单位的。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%)

Sass 对斜线分隔值的特殊解析规则使得在使用签名$lightness时传递变量变得困难。考虑改用。

$alphahsl($hue $saturation $lightness / $alpha)hsl($hue, $saturation, $lightness, $alpha)

@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)

rgb()和rgba()

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，则返回具有给定red,green,blue和alpha通道的颜色。

每个通道可以指定为 0 到 255（含）之间的无单位数，或 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)

Sass 对斜线分隔值的特殊解析规则使得在使用签名$blue时传递变量变得困难。考虑改用。

$alphargb($red $green $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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com