Sass 顏色函式
Sass 顏色函式
我們將 Sass 的顏色函式分為三部分：設定顏色函式、獲取顏色函式和操作顏色函式。
Sass 設定顏色函式
| 函式 | 描述 & 示例 |
|---|---|
| rgb(red, green, blue) | 使用紅-綠-藍（RGB）模型設定顏色。RGB 顏色值使用以下方式指定：rgb(red, green, blue)。每個引數定義了該顏色的強度，可以是 0 到 255 之間的整數，或者百分比值（從 0% 到 100%）。 示例 rgb(0, 0, 255); // 渲染為藍色，因為 blue 引數設定為最高值（255），而其他引數設定為 0。 |
| rgba(red, green, blue, alpha) | 使用紅-綠-藍-阿爾法（RGBA）模型設定顏色。RGBA 顏色值是 RGB 顏色值的擴充套件，包含一個 alpha 通道——它指定顏色的不透明度。alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。 示例 rgba(0, 0, 255, 0.3); // 渲染為帶有透明度的藍色 |
| hsl(色相, 飽和度, 亮度) | 使用色相-飽和度-亮度（HSL）模型設定顏色——它表示顏色的圓柱座標表示。色相是色輪上的一個角度（從 0 到 360）——0 或 360 是紅色，120 是綠色，240 是藍色。飽和度是一個百分比值；0% 表示灰色，100% 表示全色。亮度也是一個百分比；0% 是黑色，100% 是白色。 示例 hsl(120, 100%, 50%); // 綠色 hsl(120, 100%, 75%); // 淺綠色 hsl(120, 100%, 25%); // 深綠色 hsl(120, 60%, 70%); // 粉彩色綠色 |
| hsla(hue, saturation, lightness, alpha) | 使用色相-飽和度-亮度-阿爾法（HSLA）模型設定顏色。HSLA 顏色值是 HSL 顏色值的擴充套件，包含一個 alpha 通道——它指定顏色的不透明度。alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。 示例 hsl(120, 100%, 50%, 0.3); // 帶透明度的綠色 hsl(120, 100%, 75%, 0.3); // 帶透明度的淺綠色 |
| grayscale(color) | 設定與 color 具有相同亮度的灰色。 示例 grayscale(#7fffd4); 結果：#c6c6c6 |
| complement(color) | 設定與 color 互補的顏色。 示例 complement(#7fffd4); 結果：#ff7faa |
| invert(color, weight) | 設定 color 的反色或負色。weight 引數是可選的，必須是 0% 到 100% 之間的數字。預設為 100%。 示例 invert(white); 結果：black |
Sass 獲取顏色函式
| 函式 | 描述 & 示例 |
|---|---|
| red(color) | 返回 color 的紅色值，範圍是 0 到 255 的數字。 示例 red(#7fffd4); 結果：127 red(red); 結果：255 |
| green(color) | 返回 color 的綠色值，範圍是 0 到 255 的數字。 示例 green(#7fffd4); 結果：255 green(blue); 結果：0 |
| blue(color) | 返回 color 的藍色值，範圍是 0 到 255 的數字。 示例 blue(#7fffd4); 結果：212 blue(blue); 結果：255 |
| hue(color) | 返回 color 的色相值，範圍是 0deg 到 360deg。 示例 hue(#7fffd4); 結果：160deg |
| saturation(color) | 返回 color 的 HSL 飽和度值，範圍是 0% 到 100%。 示例 saturation(#7fffd4); 結果：100% |
| lightness(color) | 返回 color 的 HSL 亮度值，範圍是 0% 到 100%。 示例 lightness(#7fffd4); 結果：74.9% |
| alpha(color) | 返回 color 的 alpha 通道值，範圍是 0 到 1。 示例 alpha(#7fffd4); 結果： 1 |
| opacity(color) | 返回 color 的 alpha 通道值，範圍是 0 到 1。 示例 opacity(rgba(127, 255, 212, 0.5)); 結果：0.5 |
Sass 操作顏色函式
| 函式 | 描述 & 示例 |
|---|---|
| mix(color1, color2, weight) | 建立 color1 和 color2 混合的顏色。weight 引數必須是 0% 到 100% 之間。較大的權重表示使用更多的 color1。較小的權重表示使用更多的 color2。預設為 50%。 |
| adjust-hue(color, degrees) | 將 color 的色相調整 -360deg 到 360deg 的度數。 示例 adjust-hue(#7fffd4, 80deg); 結果：#8080ff |
| adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) | 透過指定的值調整一個或多個引數。此函式將指定量加到現有顏色值或從其減去。 示例 adjust-color(#7fffd4, blue: 25); 結果 |
| change-color(color, red, green, blue, hue, saturation, lightness, alpha) | 將 color 的一個或多個引數設定為新值。 示例 change-color(#7fffd4, red: 255); 結果：#ffffd4 |
| scale-color(color, red, green, blue, saturation, lightness, alpha) | 縮放 color 的一個或多個引數。 |
| rgba(color, alpha) | 使用給定的 alpha 通道建立 color 的新顏色。 示例 rgba(#7fffd4, 30%); 結果：rgba(127, 255, 212, 0.3) |
| lighten(color, amount) | 建立 color 更亮的顏色，amount 在 0% 到 100% 之間。amount 引數將 HSL 亮度增加該百分比。 |
| darken(color, amount) | 建立 color 更暗的顏色，amount 在 0% 到 100% 之間。amount 引數將 HSL 亮度減少該百分比。 |
| saturate(color, amount) | 建立 color 更飽和的顏色，amount 在 0% 到 100% 之間。amount 引數將 HSL 飽和度增加該百分比。 |
| desaturate(color, amount) | 建立 color 不那麼飽和的顏色，amount 在 0% 到 100% 之間。amount 引數將 HSL 飽和度減少該百分比。 |
| opacify(color, amount) | 建立 color 更不透明的顏色，amount 在 0 到 1 之間。amount 引數將 alpha 通道增加該量。 |
| fade-in(color, amount) | 建立 color 更不透明的顏色，amount 在 0 到 1 之間。amount 引數將 alpha 通道增加該量。 |
| transparentize(color, amount) | 建立 color 更透明的顏色，amount 在 0 到 1 之間。amount 引數將 alpha 通道減少該量。 |
| fade-out(color, amount) | 建立 color 更透明的顏色，amount 在 0 到 1 之間。amount 引數將 alpha 通道減少該量。 |
