内置模块

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

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

⚠️ Heads up!

在引入 Sass 模块系统之前，所有 Sass 函数都是全局可用的。许多函数仍然有全局别名（这些在其文档中列出）。Sass 团队不鼓励使用这些别名，并将最终弃用它们，但目前为了与旧版 Sass 和 LibSass（尚不支持模块系统）兼容，它们仍然可用。

少数函数在新的模块系统中仍然仅全局可用，这是因为它们具有特殊的求值行为（if()）或者在内置 CSS 函数之上添加了额外的行为（rgb() 和 hsl()）。这些函数不会被弃用，可以自由使用。

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

      
      Playground
    Sass Syntax@use "sass:color"

.button
  $primary-color: #6b717f
  color: $primary-color
  border: 1px solid color.scale($primary-color, $lightness: 20%)

CSS Output.button {
  color: #6b717f;
  border: 1px solid rgb(135.1641025641, 140.8256410256, 154.0358974359);
}

Sass 提供以下内置模块：

sass:math 模块提供对数字进行操作的函数。
sass:string 模块可以轻松地组合、搜索或拆分字符串。
sass:color 模块基于现有颜色生成新的颜色，使构建颜色主题变得容易。
sass:list 模块允许访问和修改列表中的值。
sass:map 模块可以查找与映射中的键关联的值，以及更多功能。
sass:selector 模块提供对 Sass 强大选择器引擎的访问。
sass:meta 模块公开 Sass 内部工作的细节。

全局函数全局函数 permalink

💡 Fun fact:

你可以传递像 calc() 或 var() 这样的特殊函数作为任何全局颜色构造函数的参数。你甚至可以使用 var() 替换多个参数，因为它可能被替换为多个值！当以这种方式调用颜色函数时，它返回一个使用相同签名调用的未加引号的字符串。

SCSS

Sass

    
    Playground
  SCSS Syntax@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))

    
    Playground
  Sass Syntax@debug rgb(0 51 102 / var(--opacity))  // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach))  // color(display-p3 var(--peach))

color($space $channel1 $channel2 $channel3)
color($space $channel1 $channel2 $channel3 / $alpha) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回给定颜色空间和通道值的颜色。

支持的颜色空间包括 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz 以及 xyz-d50，xyz-d65 是 xyz 的别名。对于所有空间，通道是介于 0 到 1（包括）或介于 0% 和 100%（包括）的数字。

如果任何颜色通道超出 0 到 1 的范围，这表示超出其颜色空间标准色域的颜色。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug color(srgb 0.1 0.6 1); // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%); // color(xyz 0.3 0 0.9 / 50%)

      
      Playground
    Sass Syntax@debug color(srgb 0.1 0.6 1)  // color(srgb 0.1 0.6 1)
@debug color(xyz 30% 0% 90% / 50%)  // color(xyz 0.3 0 0.9 / 50%)

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: since 1.15.0
LibSass: ✗
Ruby Sass: ✗

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

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

请注意，对于这些实现，如果使用函数名 hsla()，则 $alpha 参数是必需的，如果使用函数名 hsl()，则是禁止的。

Dart Sass: ✓
LibSass: ✗
Ruby Sass: since 3.7.0

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

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

色相是介于 0deg 和 360deg（包括）的数字，可以是无单位的。饱和度和亮度通常是介于 0% 和 100%（包括）的数字，不能是无单位的。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0deg 和 360deg 的色相等效于 $hue % 360deg。小于 0% 的饱和度被截断为 0%。大于 100% 的饱和度或超出 0% 和 100% 的亮度都是允许的，表示超出标准 RGB 色域的颜色。

⚠️ Heads up!

Sass 的特殊解析规则使得在使用 hsl($hue $saturation $lightness / $alpha) 签名时为 $lightness 或 $alpha 传递变量变得困难。考虑改用 hsl($hue, $saturation, $lightness, $alpha)。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug hsl(210deg 100% 20%); // #036
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(241.74, 235.552, 227.46, 0.2)

      
      Playground
    Sass Syntax@debug hsl(210deg 100% 20%) // #036
@debug hsl(210deg 100% 20% / 50%)  // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2)  // rgba(241.74, 235.552, 227.46, 0.2)

hwb($hue $whiteness $blackness)
hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定色相、白度和黑度以及给定 alpha 通道的颜色。

色相是介于 0deg 和 360deg（包括）的数字，可以是无单位的。白度和黑度通常是介于 0% 和 100%（包括）的数字，不能是无单位的。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0deg 和 360deg 的色相等效于 $hue % 360deg。如果 $whiteness + $blackness > 100%，则两个值会按比例缩放，使其总和为 100%。如果 $whiteness、$blackness 或两者都小于 0%，这表示超出标准 RGB 色域的颜色。

⚠️ Heads up!

color.hwb() 变体已被弃用。新的 Sass 代码应改用全局 hwb() 函数。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

      
      Playground
    Sass Syntax@debug hwb(210deg 0% 60%)  // #036
@debug hwb(210 0% 60% / 0.5)  // rgba(0, 51, 102, 0.5)

if($condition, $if-true, $if-false)

如果 $condition 是真值，则返回 $if-true，否则返回 $if-false。

这个函数的特殊之处在于它甚至不会求值未返回的参数，因此即使未使用的参数会引发错误，调用它也是安全的。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null

      
      Playground
    Sass Syntax@debug if(true, 10px, 15px)  // 10px
@debug if(false, 10px, 15px)  // 15px
@debug if(variable-defined($var), $var, null)  // null

lab($lightness $a $b)
lab($lightness $a $b / $alpha) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定[亮度、a、b]和 alpha 通道的颜色。

亮度是介于 0% 和 100%（包括）的数字，可以是无单位的。a 和 b 通道可以指定为介于 -125 到 125（包括）的无单位数字，或介于 -100% 和 100%（包括）的百分比。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0% 和 100% 范围的亮度将被截断到该范围。如果 a 或 b 通道超出 -125 到 125 的范围，这表示超出标准 CIELAB 色域的颜色。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);

      
      Playground
    Sass Syntax@debug lab(50% -20 30)  // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5)  // lab(80% 0 25 / 0.5);

lch($lightness $chroma $hue)
lch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

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

亮度是介于 0% 和 100%（包括）的数字，可以是无单位的。色度通道可以指定为介于 0 到 150（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。色相是介于 0deg 和 360deg（包括）的数字，可以是无单位的。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0% 和 100% 范围的亮度将被截断到该范围。色度小于 0 将被截断为 0，色度大于 150 表示超出标准 CIELAB 色域的颜色。超出 0deg 和 360deg 的色相等效于 $hue % 360deg。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);

      
      Playground
    Sass Syntax@debug lch(50% 10 270deg)  // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5)  // lch(80% 75 72deg / 0.5);

oklab($lightness $a $b)
oklab($lightness $a $b / $alpha) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定感知均匀的亮度、a、b和 alpha 通道的颜色。

亮度是介于 0% 和 100%（包括）的数字，可以是无单位的。a 和 b 通道可以指定为介于 -0.4 到 0.4（包括）的无单位数字，或介于 -100% 和 100%（包括）的百分比。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0% 和 100% 范围的亮度将被截断到该范围。如果 a 或 b 通道超出 -0.4 到 0.4 的范围，这表示超出标准 Oklab 色域的颜色。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug oklab(50% -0.1 0.2); // oklab(50% -0.1 0.2)
@debug oklab(80% 0% 20% / 0.5); // oklab(80% 0 0.25 / 0.5);

      
      Playground
    Sass Syntax@debug oklab(50% -0.1 0.2)  // oklab(50% -0.1 0.2)
@debug oklab(80% 0% 20% / 0.5)  // oklab(80% 0 0.25 / 0.5);

oklch($lightness $chroma $hue)
oklch($lightness $chroma $hue / $alpha) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定感知均匀的亮度、色度和色相，以及给定 alpha 通道的颜色。

亮度是介于 0% 和 100%（包括）的数字，可以是无单位的。色度通道可以指定为介于 0 到 0.4（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。色相是介于 0deg 和 360deg（包括）的数字，可以是无单位的。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0% 和 100% 范围的亮度将被截断到该范围。色度小于 0 将被截断为 0，色度大于 0.4 表示超出标准 Oklab 色域的颜色。超出 0deg 和 360deg 的色相等效于 $hue % 360deg。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug oklch(50% 0.1 270deg); // oklch(50% 0.1 270deg)
@debug oklch(80% 50% 0.2turn / 0.5); // oklch(80% 0.15 72deg / 0.5);

      
      Playground
    Sass Syntax@debug oklch(50% 0.1 270deg)  // oklch(50% 0.1 270deg)
@debug oklch(80% 50% 0.2turn / 0.5)  // oklch(80% 0.15 72deg / 0.5);

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
color.rgb($red $green $blue)
color.rgb($red $green $blue / $alpha)
color.rgb($red, $green, $blue, $alpha: 1) //=> color

Dart Sass: since 1.78.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定红、绿、蓝通道以及给定 alpha 通道的颜色。

红、绿、蓝通道可以指定为介于 0 和 1（包括）的数字，或介于 0% 和 100%（包括）的百分比。Alpha 通道可以指定为介于 0 和 1（包括）的无单位数字，或介于 0% 和 100%（包括）的百分比。

超出 0 到 1 范围的通道值将被截断到该范围。

⚠️ Heads up!

color.rgb() 变体已被弃用。新的 Sass 代码应改用全局 rgb() 函数。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@debug color.rgb(0 0.2 0.4); // color(srgb 0 0.2 0.4)
@debug color.rgb(0 0.2 0.4 / 50%); // color(srgb 0 0.2 0.4 / 0.5)

      
      Playground
    Sass Syntax@debug color.rgb(0 0.2 0.4)  // color(srgb 0 0.2 0.4)
@debug color.rgb(0 0.2 0.4 / 50%)  // color(srgb 0 0.2 0.4 / 0.5)