顏色
- Dart Sass
- 自 1.79.0 版起
- LibSass
- ✗
- Ruby Sass
- ✗
LibSass、Ruby Sass 和舊版的 Dart Sass 不支援 rgb 和 hsl 以外的色彩空間。
除了新增對新色彩空間的支援外，此版本還更改了顏色處理方式的一些細節。特別是，即使是舊版的 rgb 和 hsl 色彩空間也不再限制於其色域；現在可以表示 rgb(500 0 0) 或其他超出範圍的值。此外，rgb 顏色不再四捨五入到最接近的整數，因為 CSS 規範現在要求實作盡可能保持精度。
- Dart Sass
- 自 1.14.0 版起
- LibSass
- ✗
- Ruby Sass
- 自 3.6.0 版起
LibSass 和舊版的 Dart 或 Ruby Sass 不支援具有 Alpha 色板的十六進位顏色。
Sass 內建支援顏色值。就像 CSS 顏色一樣，每個顏色都代表特定色彩空間（例如 rgb 或 lab）中的一個點。Sass 顏色可以寫成十六進位碼（#f2ece4 或 #b37399aa）、CSS 顏色名稱（midnightblue、transparent）或顏色函式，例如 rgb()、lab() 或 color()。
程式碼試驗區SCSS 語法
@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)
Sass 語法
@debug #f2ece4 // #f2ece4
@debug #b37399aa // rgba(179, 115, 153, 67%)
@debug midnightblue // #191970
@debug rgb(204 102 153) // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7) // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576) // color(display-p3 0.597 0.732 0.576)
色彩空間色彩空間永久連結
Sass 支援與 CSS 相同的色彩空間集合。除非 Sass 顏色是舊版色彩空間或是您使用 color.to-space() 將其轉換到另一個空間，否則它將始終以編寫時的相同色彩空間輸出。Sass 中所有其他的顏色函式即使在其他空間中更改了顏色，也始終會以原始顏色相同的空間返回顏色。
儘管每個色彩空間的色域都有其通道的界限，但 Sass 可以表示任何色彩空間的色域外值。這允許將來自廣色域空間的顏色安全地轉換到窄色域空間，並在不丟失資訊的情況下轉換回來。
⚠️ 注意！
CSS 要求某些顏色函式裁剪其輸入通道。例如，rgb(500 0 0) 會將其紅色通道裁剪到 [0, 255] 範圍內，因此即使 rgb(500 0 0) 是 Sass 可以表示的不同值，它也等同於 rgb(255 0 0)。您可以隨時使用 Sass 的 color.change() 函式為任何空間設定色域外值。
以下是 Sass 支援的所有色彩空間的完整清單。您可以在MDN 上了解更多關於這些空間的資訊。
| 空間 | 語法 | 通道 [最小值, 最大值] |
|---|---|---|
rgb* |
rgb(102 51 153)#663399rebeccapurple
|
紅色 [0, 255]；綠色 [0, 255]；藍色 [0, 255] |
hsl* |
hsl(270 50% 40%) |
色相 [0, 360]；飽和度 [0%, 100%]；亮度 [0%, 100%] |
hwb* |
hwb(270 20% 40%) |
色相 [0, 360]；白色度 [0%, 100%]；黑色度 [0%, 100%] |
srgb |
color(srgb 0.4 0.2 0.6) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
srgb-linear |
color(srgb-linear 0.133 0.033 0.319) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
display-p3 |
color(display-p3 0.374 0.21 0.579) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
a98-rgb |
color(a98-rgb 0.358 0.212 0.584) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
prophoto-rgb |
color(prophoto-rgb 0.316 0.191 0.495) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
rec2020 |
color(rec2020 0.305 0.168 0.531) |
紅色 [0, 1]；綠色 [0, 1]；藍色 [0, 1] |
xyz, xyz-d65 |
color(xyz 0.124 0.075 0.309)color(xyz-d65 0.124 0.075 0.309)
|
x [0, 1]；y [0, 1]；z [0, 1] |
xyz-d50 |
color(xyz-d50 0.116 0.073 0.233) |
x [0, 1]；y [0, 1]；z [0, 1] |
lab |
lab(32.4% 38.4 -47.7) |
亮度 [0%, 100%]；a [-125, 125]；b [-125, 125] |
lch |
lch(32.4% 61.2 308.9deg) |
亮度 [0%, 100%]；彩度 [0, 150]；色相 [0deg, 360deg] |
oklab |
oklab(44% 0.088 -0.134) |
亮度 [0%, 100%]；a [-0.4, 0.4]；b [-0.4, 0.4] |
oklch |
oklch(44% 0.16 303.4deg) |
亮度 [0%, 100%]；彩度 [0, 0.4]；色相 [0deg, 360deg] |
標有 * 的空間是舊版色彩空間。
缺少的通道缺少的通道永久連結
CSS 和 Sass 中的顏色可以有「缺少的通道」，寫作 none，表示一個值未知或不影響顏色呈現方式的通道。例如，您可以寫 hsl(none 0% 50%)，因為如果飽和度為 0%，則色相無關緊要。在大多數情況下，缺少的通道會被視為 0 值，但它們偶爾會出現。
-
如果您正在混合顏色，無論是作為 CSS 插值的一部分（例如動畫），還是使用 Sass 的
color.mix()函數，如果可能，缺少的通道將始終採用另一種顏色在該通道上的值。 -
如果您將缺少通道的顏色轉換為具有類似通道的其他色彩空間，則在轉換完成後，該通道將被設置為
none。
儘管 color.channel() 會針對缺少的通道返回 0，但您始終可以使用 color.is-missing() 來檢查它們。
程式碼試驗區SCSS 語法
@use 'sass:color';
$grey: hsl(none 0% 50%);
@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)
Sass 語法
@use 'sass:color'
$grey: hsl(none 0% 50%)
@debug color.mix($grey, blue, $method: hsl) // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch) // lch(53.3889647411% 0 none)
無效通道無效通道永久連結
在某些情況下，如果顏色通道的值不影響顏色在螢幕上的呈現方式，則該顏色通道被視為「無效」。CSS 規範要求，當顏色轉換為新的色彩空間時，任何無效通道都應替換為 none。除了轉換為舊版色彩空間之外，Sass 在所有情況下都會執行此操作，以確保轉換為舊版色彩空間始終會產生與舊版瀏覽器相容的顏色。
有關無效通道的更多詳細資訊，請參閱 color.is-powerless()。
舊版色彩空間舊版色彩空間永久連結
過去，CSS 和 Sass 僅支援標準 RGB 色域，並且僅支援 rgb、hsl 和 hwb 函數來定義顏色。因為當時所有顏色都使用相同的色域，所以每個顏色函數都適用於每個顏色，無論其色彩空間為何。Sass 仍然保留這種行為，但僅適用於較舊的函數，且僅適用於這三個「舊版」色彩空間中的顏色。即便如此，在使用顏色函數時，明確指定要使用的 $space 仍然是一個好習慣。
當將舊版顏色值轉換為 CSS 時，Sass 也會在不同的舊版色彩空間之間自由轉換。這始終是安全的，因為它們都使用相同的底層顏色模型，這有助於確保 Sass 以盡可能相容的格式輸出顏色。
顏色函數顏色函數永久連結
Sass 支援許多有用的 顏色函數，這些函數可用於通過 混合顏色 或 縮放其通道值 來基於現有顏色創建新顏色。呼叫顏色函數時，色彩空間應始終寫成不帶引號的字串以符合 CSS，而通道名稱應寫成帶引號的字串，以便像 "red" 之類的通道不會被解析為顏色值。
💡 有趣小知識
Sass 顏色函數可以在色彩空間之間自動轉換顏色，這使得在像 Oklch 這樣的感知均勻色彩空間中進行轉換變得容易。但它們 *總是* 會返回與您提供的色彩空間相同的顏色，除非您明確呼叫 color.to-space() 來轉換它。
程式碼試驗區SCSS 語法
@use 'sass:color';
$venus: #998099;
@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)
Sass 語法
@use 'sass:color'
$venus: #998099
@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)