sass

Scss旅程(12) – 顏色(2)

今天延續之前的顏色,繼續介紹其他處理顏色相關的函式。

比起之前,今天介紹的函式做到的效果多了很多,當然介紹的內容也多了很多,各位別忘記盯著螢幕三十分鐘要記得望遠凝視一下喔

若有興趣一口氣看完函式,可以到官方直接看文件:Sass color (http://sass-lang.com/documentation/Sass/Script/Functions.html)

1.何謂HSL?

因為今天介紹內容會提到HSL模型,基於一般人比較沒接觸HSL(大多都是接觸RGB吧),這邊就先簡單做個介紹,更詳細的資訊請往維基百科移動喔感謝0w0/

1.1.H:Hue,色相

  • 直接中文翻譯的話,叫做色彩的相位
  • 範圍從0度~360度
  • 角度與顏色
    • 0度:紅色
    • 120度:綠色
    • 240度:藍色
    • 360度:回到紅色,別忘了這是個圓

1.2.S:Saturation:飽和度

  • 預設(也是一般的顏色)為100%
  • 範圍:0%(灰色)~100%(一般的顏色)
  • 數字越小:越接近灰色

1.3.L:Lightness:亮度

  • 預設(也是一般的顏色)為50%
  • 範圍:0%(黑色)~100%(白色)
  • 數字增加:顏色越接近白色
  • 數字減少:顏色越接近黑色

色相部分可以參考這張圖:

hsl-color-model
[圖一]色相圖

2.hsl、hsla

這兩者其實就差一個透明度(alpha),所以就一起講了。

2.1.hsl

資訊
hsl($hue,$saturation,$lightness)
由設定的三個數值產生顏色
$hue
色相,範圍為0deg~360deg
$saturation
飽和度,範圍為0%~100%
$lightness
亮度,範圍為0%~100%

先看看範例與測試:

scss-hsl
[圖二]hsl($hue,$daturation,$lightness)
這邊的顏色可以對應到上方的色相圖。

再看看測試二:

scss-hsl-02
[圖二]hsl函式測試
色相部分,最正確的寫法應該是「數字+deg」,但可以看到「deg」其實可以省略。飽和度和亮度也是,作為單位的「%」同樣可以省略。

至於數值部分的極限,可以看到無論是飽和度還是亮度,數字一旦小於零,一律當零處理,不管是百分比還是普通數字都一樣。

色相部分,雖然測試圖裡沒有範例,但負數的話,色相輪將會以「逆時針」繞圈(一般正數是以順時鐘方向繞圈)。

範例:

scss-hsl-03
[圖四]hsl函式測試二

2.2.hsla

資訊
hsla($hue,$saturation,$lightness,$alpha)
由設定的四個數值產生顏色
$hue
色相,範圍為0deg~360deg
$saturation
飽和度,範圍為0%~100%
$lightness
亮度,範圍為0%~100%
$alpha
透明度:範圍為0~1

範例:

scss-hsla-01
[圖五]hsla($hue,$saturation,$lightness,$alpha)
測試:

scss-hsla-02
[圖六]hsla函式測試
根據hsl的測試,可以看到hsla的前三個參數單位同樣皆可省略,飽和度與亮度的反應也與hsl一樣,小於零則等於零。

至於第四個參數:透明度,喔……其實看起來反應跟前三個很像,雖然官方規定這個參數只能填入0~1之間的數字,但其實大於1或小於零的數字也行,就是前者會被當「1」處理,後者會被當「0」處理。

那幫透明度加上單位會如何呢?

可以看到在範例裡把透明度加上了百分比,再看看右側的CSS檔,恩,看起來編譯沒問題啊!前提是沒看到命令提示字元。

看看命令提示字元滿滿的建議:

scss-hsla-03
[圖七]命令提示字元

3.hue($color)、saturation($color)和lightness($color)

資訊
hue($color)
取得顏色的色相
saturation($color)
取得顏色的飽和度
lightness($color)
取得顏色的亮度

範例:

scss-h-s-l-01
[圖八]hue($color)、$saturation($color)和lightness($color)
這部分跟上一篇介紹過的「red」、「green」和「blue」一樣,都是單獨取出顏色設定值的函式。

也許會有人疑惑「顏色不都設定好了為何還要單獨取出某個數值?」,恩像是要使用CSS製作動畫或者是簡單的按鈕換色時,單獨顏色的數值搭配「if-else」會相當便利。

4.adjust-hue($color , $degrees)

資訊
adjust-hue($color , $degrees)
調整色相
$color
要修改色相的顏色變數
$degrees
修改後的色相角度,單位「deg」可省略

範例:

scss-adjust-hue-01
[圖九]adjust-hue($color,$degrees)
作為調整色相用的函式,使用上也蠻簡單的,就把顏色和數值丟進去就好了。這邊要注意的只有第二個參數「$degrees」是「調整後的色相角度」喔。

5.saturate($color , $amount)、desaturate($color , $amount)

資訊
saturate($color , $amount)
根據第二個參數的數值增加顏色的飽和度
desaturate($color , $amount)
根據第二個參數的數值減少顏色的飽和度
$color
要進行調整的顏色變數
$amount
要增加/減少的飽和度數值

範例:

scss-saturate-desaturate-01
[圖十]saturate($color,$amount)和desaturate($color,$amount)
測試:

scss-saturate-desaturate-02
[圖十一]飽和度調整函式測試
實際運作會像這樣:

scss-saturate-desaturate-ex01
[圖十二]飽和度函式實測範例

6.lighten($color , $amount)、darken($color , $amount)

資訊:

資訊
lighten($color , $amount)
根據第二個參數增加顏色的亮度
darken($color , $amount)
根據第二個參數減少顏色的亮度
$color
要進行調整的顏色變數
$amount
要增加/減少的亮度數值

範例:

scss-lighten-darken-01
[圖十三]lighten($color,$amount)和darken($color,$amount)
測試:

scss-lighten-darken-02
[圖十四]亮度調整函式測試
實際運作:

scss-lighten-darken-ex01
[圖十五]亮度函式實測範例

7.grayscale($color)

資訊
grayscale($color)
將顏色轉換為灰階
$color
要轉換的顏色

範例:

scss-grayscale-01
[圖十六]grayscale($color)
測試:

scss-grayscale-02
[圖十七]灰階函式測試
實際運作:

scss-grayscale-ex01
[圖十八]灰階函式實測範例

8.complement($color)、invert($color)

資訊
complement($color)
取得顏色的互補色。色相為原本的色相+180deg,飽和度和亮度維持不變。
invert($color)
取得顏色的相反色。色相為原本的色相+180deg,飽和度為100-原本的飽和度,亮度為100-原本的亮度。

範例:

scss-complement-invert-01
[圖十九]complement($color)和invert($color)
測試

scss-complement-invert-02
[圖二十]互補色函式測試
看完範例和測試,發現如果光比對色相,這兩個函式根本沒兩樣阿!直到看到那個亮度,某貓才恍然大悟,喔把這兩個函式當一樣東西的我有點蠢。

先說何謂互補色,互補色代表的是色相輪上,該顏色「對面」的顏色,也就是顏色的色相加上180deg,得出的就是互補色。至於飽和度和亮度則保持原本的數值。

再說說invert得出的相反色,除了色相加上180deg,飽和度和亮度也都經過調整,皆是「相反」的數值。

以上,本篇東西頗多啊,雖然如此顏色還是沒介紹完,下篇依舊是顏色喔,敬請期待。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.