Sass 顏色函數

Sass 函數 Sass 函數

Sass 顏色函數可以分為三個部分：顏色設置、顏色獲取以及顏色操作。

下表列出了 Sass 的顏色函數：

Sass 顏色設置

函數 描述 & 實例
rgb(red, green, blue) 創建一個 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示紅色，而 G 是 "green" 綠色，B 是 "blue" 藍色。

實例:
rgb(0, 0, 255);
rgba(red, green, blue, alpha) 根據紅、綠、藍和透明度值創建一個顏色。

實例:
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness) 通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色。

實例:
hsl(120, 100%, 50%); // 綠色
hsl(120, 100%, 75%); // 淺綠色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔和的綠色
hsla(hue, saturation, lightness, alpha) 通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色。

實例:
hsl(120, 100%, 50%, 0.3); // 綠色帶有透明度
hsl(120, 100%, 75%, 0.3); // 淺綠色帶有透明度
grayscale(color) 將一個顏色變成灰色，相當於 desaturate( color,100%)。

實例:
grayscale(#7fffd4);
結果: #c6c6c6
complement(color) 返回一個補充色，相當於adjust-hue($color,180deg)。

實例:
complement(#7fffd4);
結果: #ff7faa
invert(color, weight) 返回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

實例:
invert(white);
結果: black

Sass 顏色獲取

函數 描述 & 實例
red(color) 從一個顏色中獲取其中紅色值（0-255）。

實例:
red(#7fffd4);
結果: 127
red(red);
結果: 255
green(color) 從一個顏色中獲取其中綠色值（0-255）。

實例:
green(#7fffd4);
結果: 255
green(blue);
結果: 0
blue(color) 從一個顏色中獲取其中藍色值（0-255）。

實例:
blue(#7fffd4);
結果: 212
blue(blue);
結果: 255
hue(color) 返回顏色在 HSL 色值中的角度值 (0deg - 255deg)。

實例:
hue(#7fffd4);
結果: 160deg
saturation(color) 獲取一個顏色的飽和度值(0% - 100%)。

實例:
saturation(#7fffd4);
結果: 100%
lightness(color) 獲取一個顏色的亮度值(0% - 100%)。

實例:
lightness(#7fffd4);
結果: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

實例:
alpha(#7fffd4);
結果: 1
opacity(color) 獲取顏色透明度值(0-1)。

實例:
opacity(rgba(127, 255, 212, 0.5);
結果: 0.5

Sass 顏色操作

函數 描述 & 實例
mix(color1, color2, weight) 把兩種顏色混合起來。 weight 參數必須是 0% 到 100%。默認 weight 為 50%，表明新顏色各取 50% color1 和 color2 的色值相加。如果 weight 為 25%，那表明新顏色為 25% color1 和 75% color2 的色值相加。
adjust-hue(color, degrees) 通過改變一個顏色的色相值（-360deg - 360deg），創建一個新的顏色。

實例:
adjust-hue(#7fffd4, 80deg);
結果: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) 這個函數能夠調整給定色彩的一個或多個屬性值，包括 RGB 和 HSL 色彩的各項色值參數，另外還有 alpha 通道的取值。這些屬性值的調整依賴傳入的關鍵值參數，通過這些參數再與給定顏色相應的色彩值做加減運算。

實例:
adjust-color(#7fffd4, blue: 25);
結果:
change-color(color, red, green, blue, hue, saturation, lightness, alpha) 跟上面 adjust-color 類似，只是在該函數中傳入的參數將直接替換原來的值，而不做任何的運算。

實例:
change-color(#7fffd4, red: 255);
結果: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) 另一種實用的顏色調節函數。adjust-color 通過傳入的參數簡單的與本身的色值參數做加減，有時候可能會導致累加值溢出，當然，函數會把結果控制在有效的閾值內。而 scale-color 函數則避免了這種情況，可以不必擔心溢出，讓參數在閾值範圍內進行有效的調節。

舉個例子，一個顏色的亮度 lightness 取值在 0% ~ 100% 之間，假如執行 scale-color($color, $lightness: 40%)，表明該顏色的亮度將有 (100 - 原始值) × 40% 的增幅。

另一個例子，執行 scale-color($color, $lightness: -40%)，表明這個顏色的亮度將減少 (原始值 - 0) × 40% 這麼多的值。

所有傳參的取值範圍都在 0% ~ 100% 之間，並且 RGB 同 HSL 的傳參不能衝突。

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) 根據紅、綠、藍和透明度值創建一個顏色。

實例:
rgba(#7fffd4, 30%);
結果: rgba(127, 255, 212, 0.3)
lighten(color, amount) 通過改變顏色的亮度值（0% - 100%），讓顏色變亮，創建一個新的顏色。
darken(color, amount) 通過改變顏色的亮度值（0% - 100%），讓顏色變暗，創建一個新的顏色。
saturate(color, amount) 提高傳入顏色的色彩飽和度。等同於 adjust-color( color, saturation: amount)
desaturate(color, amount) 調低一個顏色的飽和度後產生一個新的色值。同樣，飽和度的取值區間在 0% ~ 100%。等同於 adjust-color(color, saturation: -amount)
opacify(color, amount) 降低顏色的透明度，取值在 0-1 之。等價於 adjust-color(color, alpha: amount)
fade-in(color, amount) 降低顏色的透明度，取值在 0-1 之。等價於 adjust-color(color, alpha: amount)
transparentize(color, amount) 提升顏色的透明度，取值在 0-1 之間。等價於 adjust-color(color, alpha: -amount)
fade-out(color, amount) 提升顏色的透明度，取值在 0-1 之間。等價於 adjust-color(color, alpha: -amount)

Sass 函數 Sass 函數