sass

Scss旅程(13) – 顏色(3)

今天是顏色這個大單元最後一部分,看完上次落落長的HSL,再看看這次要介紹的函式。

數量差有點大。(哎

雖然數量差頗大,但這次介紹的函式可以說是綜合了前兩篇的內容,所謂的一式多用就是這樣啊。

在正式開始前如想複習前兩篇,請往此走:

Scss旅程(11) – 顏色(1):以RGB為主的函式介紹

Scss旅程(12) – 顏色(2):以HSL為主的函式介紹

1.adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness],[$alpha])

adjust-color目的是增加或減少顏色的數值,參數可以看到全填有8個。除了第一個顏色必填外,後面7個都是選填,看要調整哪個數值就填哪個。

但是!!這邊有一個要注意的點,後面七個變數其實可以分為三組:RGB、HSL跟Alpha,RGB跟HSL無法共存!注意,RGB跟HSL選項無法共存喔!只能選擇一種進行調整。

參數說明:

資訊
$color
要進行調整的顏色
$red
$green
$blue
範圍為-255~255
想藉由調整rgb數值改變顏色的話就使用這三個參數,使用這三個的話,後三個參數便不可使用(用了會出現錯誤)
$hue
範圍不限,單位是角度
$saturation
$lightness
範圍為-100%~100%
想藉由調整顏色的HSL數值改變顏色就使用這三個參數,使用這三個的話,前三個參數便不可使用(用了會出現錯誤)
$alpha
範圍:-1~1,調整顏色的透明度。

範例:

scss-adjust-color-01
[圖一]adjust-color範例
相較於之前介紹的函式,當想調整顏色的RGB數值或HSL數值時得使用相對應個函式,這個函式倒是將全部的參數都包含了。

可以看到範例裡的顏色調整,當給予的數值為「正數」,該參數對應的數值便會「增加給予的數值數量」。

中文有點難懂,就是$red:100時,原本的「red」數值如果是「150」,經調整後會變成「250」。若增加後的數值超出範圍(rgb的話最大值為255),則一律視為最大值255。

若給予的數值為「負數」,就變成了「減少給予的數值數量」。若減少後的數值超出範圍(最小值為0),則一律視為最小值。

測試一:

scss-adjust-color-test-01
[圖二]adjust-color測試一
在測試一可以看到參數若是使用百分比,編譯時並不會出錯,而百分比則是直接忽略,這點和等一下要介紹的函式完全不同,要特別注意。

測試二:

scss-adjust-color-test-02
[圖三]adjust-color測試二
測試二則是HSL和alpha,可以看到就算單位錯亂編譯依舊成功執行,但可以的話還是請使用正確單位吧。

2.scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])

scale-color目的也是增加或減少顏色的數值,看起來跟adjust-color很像……嗎?

先看看參數:

資訊
$color
要進行調整的顏色
$red
$green
$blue
範圍:無
想藉由調整rgb數值改變顏色的話就使用這三個參數,使用這三個的話,後三個參數便不可使用(用了會出現錯誤)
$saturation
$lightness
範圍:無
想藉由調整顏色的HSL數值改變顏色就使用這三個參數,使用這三個的話,前三個參數便不可使用(用了會出現錯誤)
$alpha
範圍:無
調整顏色的透明度,數值單位僅限百分比。

在說明跟adjust-color有何差別前,先來看看使用範例:

scss-scale-color-01
[圖四]scale-color範例
scale-color,跟ajust-color一樣,都是藉由調整顏色參數,達到更改顏色的目的。光看結果和根本一模一樣的參數,恩,這不是一樣嗎?(抓頭

不,這兩個其實差很多。

adjust-color調整顏色的方法是「直接調整」,也就是當我想讓顏色的紅色增加多少,就直接加多少,相反地,想讓紅色減少多少,就直接減多少。

直來直往,簡單明瞭。

而scale-color是這樣,用現在數值的「百分之幾」作為數值提升的篇幅。

用增加亮度作範例,當使用同樣的增加數字(不是說增加量,是說那個數字而已,例如$lightness : 20%),原本越暗的顏色調整後越亮;而原本就亮的顏色調整後,亮度增加的幅度反而不多。

轉換成公式是這樣:

  • 當想增加的量為正數(n>0%):結果 = 原數值 + (100%-原數值) * n/100
  • 當想增加的量為負數(n < 0%):結果 = 原數值 – 原數值 *n/100

詳細可以看測試一:

scss-scale-color-test-01
[圖五]scale-color測試一
雖然測試一看來是編譯正常,但經過測試,只要單位錯誤,不管是其他單位還是乾脆點把百分比符號拿掉,編譯都會出錯,這點請務必注意啊!

3.change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])

又是一個可以調整顏色數值的函式,那跟前兩個的差別……?

在說明前先看看參數:

資訊
$color
要進行調整的顏色
$red
$green
$blue
範圍為0~255
想藉由調整rgb數值改變顏色的話就使用這三個參數,使用這三個的話,後三個參數便不可使用(用了會出現錯誤)
$hue
範圍為0~360deg
$saturation
$lightness
範圍為0%~100%
想藉由調整顏色的HSL數值改變顏色就使用這三個參數,使用這三個的話,前三個參數便不可使用(用了會出現錯誤)
$alpha
範圍為0~1
調整顏色的透明度,數值單位僅限百分比。

使用範例:

scss-change-color-01
[圖六]change-color範例
change-color比起adjust-color跟scale-color使用起來更加直覺,想改成怎樣,就直接改成怎樣!只要注意RGB跟HSL設定會衝突就行(會出現錯誤)。

測試一:

scss-change-color-test-01
[圖七]change-color測試一
可以看到跟adjust-color一樣,參數單位錯誤或是省略編譯都沒問題,但建議還是養成輸入正確單位的習慣會比較好。

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.