概述

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

在引入Sass模块系统之前,所有Sass函数任何时候都是全局的。许多函数仍然有全局别名(在它们的文档中列出了这些别名)。Sass团队不鼓励使用它们,并最终将弃用它们,但目前它们仍然可以与旧的Sass版本和LibSass(后者还不支持模块系统)兼容。

在新的模块系统中,也只有少数函数是全局可用的,这可能是因为它们具有特殊的计算行为(if()),也可能是因为它们在顶层的内置CSS函数(rgb()hsl())上添加了额外的行为。这些不会被弃用,可以自由使用。

Sass提供以下内置模块:

全局函数

hsl()

  • 包含函数:

    • 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 <= num <= 360deg的一个数字。饱和度和亮度是0% <= num <= 100%的一个数字。所有这些数可能都是无单位的。alpha通道可以指定为0 <= num <= 1的一个无单元数,也可以指定为0% <= num <= 100%之间的百分比。

    您可以将诸如calc()var()这样的特殊函数传递给hsl()来代替任何参数。您甚至可以使用var()来代替多个参数,因为它可能被多个值替换!当以这种方式调用颜色函数时,它将使用与调用时相同的方法返回未引用的字符串。

    Sass对斜杠分隔值的特殊解析规则使得在使用hsl($hue $saturation $lightness / $alpha)方法时,很难传递$lightness$alpha的变量。考虑使用hsl($hue, $saturation, $lightness, $alpha)代替。

  • 其它

    兼容性(Level 4 Syntax)
    兼容性(Percent Alpha)

if()

  • 包含函数:

    • if($condition, $if-true, $if-false)
  • 返回值:boolean

  • 用法:

    这个函数的特殊之处在于,它甚至不计算未返回的参数的值,所以即使未使用的参数会抛出错误,调用它也是安全的。

rgb()

  • 包含函数:

    • 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、255),或0%100%之间的百分比(包括0%、100%)。alpha通道可以指定为0到1之间的无单位数字(包括0、1),也可以指定为0%100%之间的百分比(包括0%、100%)。

    您可以将诸如calc()var()这样的特殊函数传递给rgb()来代替任何参数。您甚至可以使用var()来代替多个参数,因为它可能被多个值替换!当以这种方式调用颜色函数时,它将使用与调用时相同的方法返回未引用的字符串。

    Sass对斜杠分隔值的特殊解析规则使得在使用rgb($red $green $blue / $alpha)方法时,很难传递$blue$alpha的变量。考虑使用rgb($red, $green, $blue, $alpha)代替。

    如果传递了$color$alpha,将返回带有给定$alpha通道的$color,而不是初始的$alpha通道值。

  • 其它:

    兼容性(Level 4 Syntax)
    兼容性(Percent Alpha)
上次更新: 2019-11-6 11:55:12 PM