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, bluesaturation, 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 函數