内置模块

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

⚠️注意!
在引入 Sass 模块系统之前,所有 Sass 功能始终全局可用。许多函数仍然有全局别名(这些在他们的文档中列出)。Sass 团队不鼓励使用它们,并最终会弃用它们,但目前它们仍然可以与旧 Sass 版本和 Lib Sass(尚不支持模块系统)兼容。
即使在新的模块系统中,也只有少数函数全局可用,要么因为它们具有特殊的求值行为( if() ),要么因为它们在内置 CSS 函数( rgb() hsl() 上添加了额外的行为)。这些不会被弃用,可以自由使用。
scss 语法 css 语法
@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)
⚠️注意!
有些语言认为更多的值是假的,而不仅仅是 false null 。Sass 不是那种语言! 空字符串 空列表 和数字 0 ,在 Sass 中都是真实的。


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

下篇: sass:color