sass

Scss旅程(11) – 顏色(1)

今天要介紹的是Sass/Scss裡相當有趣的部分:顏色。

在一般的CSS裡使用顏色不外乎就是那十六進位的色碼,通常在設定顏色時,如果想更換顏色,就是查色碼表,然後換上另一個色碼。

當然在使用Scss時也是可以這樣用,但對於顏色部分,Scss提供了不少的「函式」可以拿來玩、不是,是可以拿來用,在修改顏色時多了不少的樂趣。

由於函式眾多,這部分會分成三週進行介紹,有興趣也可以到Sass官方直接看文件:Sass color (http://sass-lang.com/documentation/Sass/Script/Functions.html)

1.rgb相關

1.1.rgb與rgba

這兩個因為長得很像,使用上也很像所以就一起講了。

這兩位(?)的糾葛……喔其實沒啥糾葛啦,只是因為兩個實在很像,又後者比前者多了一個透明度的設定,所以就某貓來說會比較偏好使用後者。

一張圖看出兩者差別:

scss-rgb-rgba
[圖一]rgb與rgba
資訊
rgb(red,green,blue)
由設定的三個數值產生顏色
rgba(reg,green,blue,alpha)
由設定的三個數值與alpha值產生顏色

可以看到在Sass官方裡也是說這兩個函式一個需要三個參數,一個需要四個參數。但經過某貓測試後發現其實只有rgb需要遵守規則啊。

從比對圖可以看到,當使用rgba時,除了按照規定輸入「rgb」三值外,也可以直接使用顏色的英文,或者是十六進位色碼都可以啟動此函式。

至於第四個參數「透明度」,只要「大於等於1」就會判定成「1」,至於小於0……看來是直接判定成「0」呢。

scss-rgba
[圖二]rgba測試

1.2.red($color)、green($color)和blue($color)

資訊
red($color)
取得變數$color關於顏色「紅色」的資訊
green($color)
取得變數$color關於顏色「綠色」的資訊
blue($color)
取得變數$color關於顏色「藍色」的資訊

這三個是很好玩的函式,主要是判斷「顏色變數是否包含這三個顏色」。若有,則變數等於設定的顏色rgb數值,若無,變數等於0。

這樣也許有點難懂,看個範例吧:

scss-red-green-blue
[圖三]red、blue和green
第一個id主要是測試到底會輸出啥,大抵就是輸出「該顏色對應函式的數值」。測試是使用「red」,所以當變數含有「rgb的r數值」時,就會輸出該數值。

若沒有(比如說把$color1由red改為test,根本不是顏色),編譯後絕對不會出現0,而是大爆炸(編譯錯誤,因為$color1變數不是「顏色」)。

另外兩個「blue」和「green」使用方法和「red」相同。

第二個class則是實際使用範例,注意點在Scss的if-else裡,當變數為零時判斷依舊是「true」喔!這點超級不習慣啊。

1.3.mix($color1,$color2,[$weight])

資訊
mix($color1,$color2,[$weight])
輸出混合$color1$color2的顏色。第三個變數$weight可有可無,可使用百分比或小數點,範圍為 0%~100% 或 0~100 ,只要符合範圍在數字前加幾個零都可以,若在範圍外則爆炸(錯誤)。

先看範例:

scss-mix
[圖四]mix混合
這個函式可以取得兩個顏色的混合,相當適合製作有顏色過度的動畫(雖然IE大概不支援)。

第三個變數$weight代表的是「color1在混合後的顏色裡佔的比重」,「0」的話表示color1在混合後的顏色裡佔0%,「100或100%」表示color在混合後的顏色裡佔100%。

另外一個注意點是,這個參數可以加上變數名稱(詳見圖片)而不會出錯喔。

2.透明度

2.1.alpha、opacity

資訊
alpha($color)
opacity($color)
取得顏色變數的透明度數值

這兩個函式功用其實一樣,都是取得顏色的透明度數值。就結果論來說……看來是一樣的啊,就看習慣哪個就用哪個吧。

scss-alpha-opacity
[圖五]alpha和opacity

2.2.opacify、fade-in

資訊
opacify($color,$amount)
fade-in($color,$amount)
根據第二個參數「增加」顏色的透明值。若增加後的透明度大於1,則當作1(不會出現報錯)。$color為顏色變數,只要是顏色都可以,不限設定方式(詳見範例)。$amount為要「增加」的透明度數值,範圍為 0<=$amount<=1
scss-opacify-fadein
[圖六]opacity和fade-in

2.3.transparentize、fade-out

資訊
transparentize($color,$amount)
fade-out($color,$amount)
根據第二個參數「減少」顏色的透明值。若減少後的透明度小於0,則當作0(不會出現錯誤)。$color為顏色變數,只要是顏色都可以,不限設定方式(詳見範例)。$amount為要「減少」的透明度數值,範圍為 0<=$amount<=1

scss-trans-fadeout
[圖七]transparentize和fade-in
以上是本週的顏色部分,下週會介紹數個關於顏色設定的函式,從文件來看就是「hsl」部分的函式,敬請期待0w0/

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.