內建模組

相容性
Dart Sass
自 1.23.0 起
LibSass
✗
Ruby Sass
✗

目前只有 Dart Sass 支援使用 @use 載入內建模組。其他實作的使用者必須改用全域名稱呼叫函式。

Sass 提供許多內建模組，其中包含實用的函式（以及偶爾的混入）。這些模組可以使用 @use 規則載入，就像任何使用者定義的樣式表一樣，並且可以像任何其他模組成員一樣呼叫其函式。所有內建模組 URL 都以 sass: 開頭，表示它們是 Sass 的一部分。

⚠️ 注意！

在 Sass 模組系統引入之前，所有 Sass 函式在任何時候都是全域可用的。許多函式仍然具有全域別名（這些別名列在其文件中）。Sass 團隊不鼓勵使用它們，最終將棄用它們，但目前它們仍然可用於與舊版 Sass 和 LibSass（尚不支援模組系統）相容。

即使在新模組系統中，一些函式也*僅*在全域範圍內可用，因為它們具有特殊的評估行為（if()）或因為它們在內建 CSS 函式（rgb() 和 hsl()）之上添加了額外行為。這些函式不會被棄用，可以自由使用。

程式碼遊樂場

SCSS 語法

@use "sass:color";

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

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 rgb(135.1641025641, 140.8256410256, 154.0358974359);
}

Sass 提供以下內建模組

全域函式全域函式永久連結

💡 小知識

您可以將特殊函式，例如 calc() 或 var()，作為任何全域顏色建構函式的引數傳遞。您甚至可以使用 var() 來取代多個引數，因為它可能會被多個值取代！當以這種方式呼叫顏色函式時，它會使用與呼叫時相同的簽章返回一個未加引號的字串。

程式碼遊樂場

SCSS 語法

@debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug color(display-p3 var(--peach)); // color(display-p3 var(--peach))
程式碼遊樂場

Sass 語法

@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
自 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 語法

@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%)
程式碼遊樂場

Sass 語法

@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
相容性（Level 4 語法）
Dart Sass
自 1.15.0 版起
LibSass
✗
Ruby Sass
✗

LibSass 和 Ruby Sass 僅支援下列簽章

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

請注意，對於這些實作，如果使用函式名稱 hsla()，則 *必須* 提供 $alpha 引數；如果使用函式名稱 hsl()，則 *禁止* 提供 $alpha 引數。

相容性（百分比 Alpha 值）
Dart Sass
✓
LibSass
✗
Ruby Sass
自 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 色域。

⚠️ 注意！

Sass 對於以斜線分隔的值的特殊剖析規則使得在使用 hsl($hue $saturation $lightness / $alpha) 簽章時難以傳遞 $lightness 或 $alpha 的變數。請考慮改用 hsl($hue, $saturation, $lightness, $alpha)。

程式碼遊樂場

SCSS 語法

@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)
程式碼遊樂場

Sass 語法

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

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

如果 $condition 為真值，則返回 $if-true，否則返回 $if-false。

這個函式很特殊，它甚至不會評估未返回的引數，因此即使未使用的引數會引發錯誤，也可以安全地呼叫它。

程式碼遊樂場

SCSS 語法

@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null
程式碼遊樂場

Sass 語法

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

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
自 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 色域。

⚠️ 注意！

color.hwb() 變體已被棄用。新的 Sass 程式碼應改用全域 hwb() 函式。

程式碼遊樂場

SCSS 語法

@debug hwb(210deg 0% 60%); // #036
@debug hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)
程式碼遊樂場

Sass 語法

@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 語法

@debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null
程式碼遊樂場

Sass 語法

@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
自 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 語法

@debug lab(50% -20 30); // lab(50% -20 30)
@debug lab(80% 0% 20% / 0.5); // lab(80% 0 25 / 0.5);
程式碼遊樂場

Sass 語法

@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
自 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 語法

@debug lch(50% 10 270deg); // lch(50% 10 270deg)
@debug lch(80% 50% 0.2turn / 0.5); // lch(80% 75 72deg / 0.5);
程式碼遊樂場

Sass 語法

@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
自 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 語法

@debug oklab(50% -0.1 0.15); // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5); // oklab(80% 0 0.08 / 0.5)
程式碼遊樂場

Sass 語法

@debug oklab(50% -0.1 0.15)  // oklab(50% -0.1 0.15)
@debug oklab(80% 0% 20% / 0.5)  // oklab(80% 0 0.08 / 0.5)

oklch($lightness $chroma $hue)
oklch($lightness $chroma $hue / $alpha) //=> color
相容性
Dart Sass
自 1.78.0 版起
LibSass
✗
Ruby Sass
✗

傳回一個具有指定 [感知均勻亮度、彩度和色相] 以及指定 Alpha 色板的顏色。

亮度 (lightness) 是一個介於 0% 到 100% 之間（含）的數字，可以不帶單位。彩度 (chroma) 通道可以指定為 0 到 0.4 之間（含）的無單位數字，或者 0% 到 100% 之間（含）的百分比。色相 (hue) 是一個介於 0deg 到 360deg 之間（含）的數字，可以不帶單位。Alpha 通道可以指定為 0 到 1 之間（含）的無單位數字，或者 0% 到 100% 之間（含）的百分比。

亮度超出 0% 到 100% 範圍的值會被限制在該範圍內。小於 0 的彩度會被限制為 0，而大於 0.4 的彩度則代表顏色超出標準 Oklab 色域。超出 0deg 到 360deg 範圍的色相等同於 $hue % 360deg。

程式碼遊樂場

SCSS 語法

@debug oklch(50% 0.3 270deg); // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5); // oklch(80% 0.2 72deg / 0.5);
程式碼遊樂場

Sass 語法

@debug oklch(50% 0.3 270deg)  // oklch(50% 0.3 270deg)
@debug oklch(80% 50% 0.2turn / 0.5)  // oklch(80% 0.2 72deg / 0.5);

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
相容性（Level 4 語法）
Dart Sass
自 1.15.0 版起
LibSass
✗
Ruby Sass
✗

LibSass 和 Ruby Sass 僅支援下列簽章

  • rgb($red, $green, $blue)
  • rgba($red, $green, $blue, $alpha)
  • rgba($color, $alpha)

請注意，對於這些實作，如果使用函數名稱 rgba()，則 *必須* 提供 $alpha 參數；如果使用函數名稱 rgb()，則 *禁止* 提供 $alpha 參數。

相容性（百分比 Alpha 值）
Dart Sass
✓
LibSass
✗
Ruby Sass
自 3.7.0 版起

LibSass 和舊版 Ruby Sass 不支援以百分比指定的 Alpha 值。

如果傳遞了 $red、$green、$blue 以及可選的 $alpha，則會返回具有指定紅色、綠色、藍色和 Alpha 通道的顏色。

每個通道可以指定為 0 到 255 之間（含）的無單位數字，或者 0% 到 100% 之間（含）的百分比。Alpha 通道可以指定為 0 到 1 之間（含）的無單位數字，或者 0% 到 100% 之間（含）的百分比。

如果任何顏色通道超出 0 到 255 的範圍，則表示顏色超出標準 RGB 色域。

⚠️ 注意！

Sass 針對以斜線分隔的值的特殊解析規則使得在使用 rgb($red $green $blue / $alpha) 簽章時難以傳遞 $blue 或 $alpha 變數。建議改用 rgb($red, $green, $blue, $alpha)。

程式碼遊樂場

SCSS 語法

@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)
程式碼遊樂場

Sass 語法

@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，則會返回使用指定 $alpha 通道取代其原始 Alpha 通道的 $color。

程式碼遊樂場

SCSS 語法

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366
程式碼遊樂場

Sass 語法

@debug rgb(#f2ece4, 50%)  // rgba(242, 236, 228, 0.5)
@debug rgba(rgba(0, 51, 102, 0.5), 1)  // #003366