Sass關於顏色函式的樂趣
在Sass中，定義了很多現成的函式，可供我們使用。在最初使用Sass的時候，用的最多的顏色函式就是lighten($color, $amount)和darken($color, $amount)，對於其他的函式，少之又少，真是弱爆了，有木有。
切圖的時候，我的顏色全部是通過PS的吸管工具獲取的，之後複製貼上即可。如果我們熟悉了顏色標準，那以後我們對顏色的認知，我想不會再是通過吸管工具獲取這種層面了。
1. 瞭解RGB和HSL顏色標準
A. RGB顏色標準
我們都知道，紅、綠、藍，通常被我們稱為三原色，如果將他們以不同比例混合，可以產生很多不一樣的顏色。RGB就是根據這一原理產生的一個表示式，R(red紅色)、G(green綠色)、B(blue藍色)
rgb($red, $green, $blue)，其中，每個值得範圍都是0~255，RGB各有256級亮度（0~255），都代表的是當前原色的亮度，最終通過計算三個色的比例獲得一個顏色。我們按照A1256（256 * 256 * 256）計算，可以得出16777216中顏色。
因為網頁顏色是以十六進位制程式碼表示，RGB轉16進位制相當於就是十進位制轉十六進位制，比如rgb(234, 34, 211)，234的十六進位制是EA，34的十六進位制是22，211的十六進位制是D3，最終轉換的十六進位制表示為：#EA22D3。
B. HSL顏色標準
H(hue色調)、S(saturation飽和度)、B(lightness亮度)，hsl($hue, $saturation, $lightness)，H取值範圍是00~3600的圓心角，S和B都是0~100%的取值範圍。
下圖是H(色調)取值的轉盤圖，我們需要記住六大主色：00~3600為紅色(red)，600為黃色(yellow)，1200為綠色(green)，1800為青色(cyan)，2400位藍色(blue)，3000為紫紅色(magenta)。如hsl(300, 50%, 50%)，300就在轉盤上的3000，為紫紅色。
HSL中的S(飽和度)，百分比越大，顏色中的灰色就越少，顏色越鮮豔飽和。
HSL中的L(亮度)，百分比越小，色彩越暗，越接近於黑色；百分比越大，色彩越亮，越接近於白色。
2. RGB函式
在Sass中，共有六種RGB函式：
- rgb($red, $green, $blue) //根據RGB中的三個值計算出一個顏色；
- rgba($red, $green, $blue, $alpha) //根據RGB中紅、綠、藍和透明度計算出一個顏色；
- red($color) //獲取RGB中的紅色值；
- green($color) //獲取RGB中的綠色值；
- blue($color) //獲取RGB中的藍色值；
- mix($color1, $color2, [$weight]) //混合兩種顏色；
在實際的應用中，我們主要用到其中rgb( )，rgba( )，mix( )這三個函式。對於很少用到的red( )、green( )、blue( )這三個函式，我覺得在我們寫Sass時，是沒有多大意義的，最多在設定顏色變數的時候可以用到。我們可以在Ruby的命令控制檯輸入Sass命令，可以檢視結果。
在Ruby命令控制檯，要執行Sass相關的計算和函式，首先要做轉換，輸入sass -i，開啟Sass的函式計算。
sass -i
>> $colorMain: orange
#ffa500
>> red($colorMain)
255
>> green($colorMain)
165
>> blue($colorMain)
0
>> rgb(255, 165, 0)
#ffa500
從上面的結果可以看出，rgb( )函式最終轉換的結果是十六進位制表示式，對於上面這幾個函數了解這麼多，我認為就可了。
A. rgba($red, $green, $blue, $alpha)函式
$alpha表示透明度，取值範圍0~1，函式最終的返回值是RGBA值。
body { background: rgba(255, 165, 0, 0.5); }
編譯後的CSS樣式：
body { background: rgba(255, 165, 0, 0.5); }
rgba( )函式還有另一種形式的函式，只有兩個變數，rgba($color, $alpha)，函式返回值和上面這種形式的結果是一樣的。在實際應用中，後者用的比較多。
$colorMain: orange; body { background: rgba($colorMain, 0.5); }
編譯後的CSS樣式：
body { background: rgba(255, 165, 0, 0.5); }
B. mix($color1, $color2, [$weight])函式
$weight表示的混合的權重，預設值為50%，指的第一個顏色$color1的比例，取值範圍為0~100%，函式最終的返回值是顏色的十六進位制表示式。
$color1: orange; $color2: green; body { background: mix($color1, $color2, 0.6); }
編譯後的CSS樣式：
body { background: #028000; }
3. HSL函式
在Sass中，共有13種HSL函式：
- hsl($hue, $saturation, $lightness) //根據HSL中的三個值計算出一個顏色；
- hsla($hue, $saturation, $lightness, $alpha) //根據HSL中色調值、飽和度、亮度和透明度計算出一個顏色；
- hue($color) //獲取HSL中的色調值；
- saturation($color) //獲取HSL中的飽和度；
- lightness($color) //獲取HSL中的亮度值；
- adjust-hue($color, $degree) //改變HSL中的色調值；
- lighten($color, $amount) //顏色變淺函式；
- darken($color, $amount) //顏色變深函式；
- saturate($color, $amount) //增加顏色的飽和度；
- desaturate($color, $amount) //減少顏色的飽和度；
- grayscale($color) //將該顏色轉換為相對應的灰度顏色；
- complement($color) //獲取該顏色值旋轉180度後相對應的顏色；
- invert($color) //和complement相似，獲取該顏色值旋轉180度後相對應的顏色，不過不能改變透明度；
跟RGB函式類似，hue( )、saturation( )、lightness( ) 這三個函式在Sass實際應用中，沒有多少意義的，我們只需在Ruby的命令控制檯中瞭解一下結果就好。
sass -i
>> $colorMain: orange
#ffa500
>> hue($colorMain)
38.82353deg
>> saturation($colorMain)
100%
>> lightness($colorMain)
50%
>> hsl(38, 100%, 50%)
#ffa200
>> hsla(38, 100%, 50%, 0.5)
rgba(255, 162, 0, 0.5)
看上面，hsl( )函式返回值的結果也是顏色十六進位制表示式，hsla( )函式返回值的結果是RGBA值。
A. hsla($hue, $saturation, $lightness, $alpha)函式
同樣的，$alpha表示的是透明度，取值範圍在0~1。函式是通過H(色調值)、S(飽和度)、L(亮度)來獲取的RGB值。
B. adjust-hue($color, $degree)色調調節函式
$degree表示的改變色排程數的值，可以是正數，也可以是負數。如果為正數，在HSL顏色轉盤上順時針旋轉相應的$degree，旋轉之後的度數就是顏色的色調值；如果是負數，逆時針旋轉即可。舉個最簡單的例子：
body { background: adjust-hue(red, 60deg); }
編譯後的CSS樣式：
body { background: yellow; }
檢視顏色轉盤，旋轉60度，結果就是黃色。
C. lighten($color, $amount)變淺函式和darken($color, $amount)變深函式
$amount是調節顏色的亮度，取值範圍是0~100%。
$colorMain: #3d48de; .lighten { background-color: lighten($colorMain, 15%); } .darken { background-color: darken($colorMain, 25%); }
編譯後的CSS樣式：
.lighten { background-color: #7e86e9; } .darken { background-color: #171e85; }
效果：原來顏色、變淺顏色、加深顏色
D. saturate($color, $amount)增加飽和度函式和desaturate($color, $amount)減少飽和度函式
$amount是調節顏色的飽和度，取值範圍為0~100%。
$colorMain: #3d48de; .saturate { background-color: saturate($colorMain, 15%); } .desaturate { background-color: desaturate($colorMain, 25%); }
編譯後的CSS樣式：
.saturate { background-color: #2c39ef; } .desaturate { background-color: #5960c2; }
效果：原來顏色、飽和度增加了的顏色、飽和度減少了的顏色
E. grayscale($color)灰度函式
把$color顏色轉換為相應的灰度顏色。
$colorMain: #5960c2; body { background-color: grayscale($colorMain); }
編譯後的CSS樣式：
body { background-color: #8e8e8e; }
F. complement($color)函式和invert($color)函式
這兩個函式的區別就是透明度的改變，invert( )不可改變透明度。
$colorMain: #5960c2; body { background-color: complement($colorMain); } .div { background-color: invert($colorMain); }
編譯後的CSS樣式：
body { background-color: #c2bb59; } .div { background-color: #a69f3d; }
效果：原來顏色、complement( )計算後的顏色、invert( )計算後的顏色
4. Opacity函式
在Sass中關於Opacity函式共有四種：
- alpha/opacity($color) //獲取顏色的透明度；
- rgba($color, $alpha) //改變顏色的透明度；
- opacify/fade-in($color, $amount) //讓顏色更加不透明；
- transparentize/fade-out($color, $amount) //使顏色更加透明化；
我們在寫CSS的時候，都用到過opacity這個屬性來設定元素的透明度，他控制的是整個元素的透明度，元素上如果有字型或者層，都將會繼承透明度。如果用rgba( )函式、hsla( )函式，或者transforms屬性來設定元素的透明度，只是針對顏色上的透明，不會改變元素中的子元素透明度。所以，用rgba( )函式和hsla( )函式來製作透明背景，是不錯的選擇。
Opacity函式主要針對的也是顏色的透明度。
A. alpha/opacity($color)函式和rgba($color, $alpha)函式
在RGB函式的時候，就說了rgba( )的兩種形式。
$colorMain: red; $colorAlpha1: rgba(red, 0.8); $colorAlpha2: rgba(red, 0.5); body { background-color: rgba($colorMain, alpha($colorAlpha1)); } .div { background-color: rgba($colorMain, opacity($colorAlpha2)); }
編譯後的CSS樣式：
body { background-color: rgba(255, 0, 0, 0.8); } .div { background-color: rgba(255, 0, 0, 0.5); }
當然，我們沒有必要在設定了$colorAlpha1和$colorAlpha1這兩個變數，再用alpha/opacity($color)函式去獲取他們的透明度，這裡只是舉例說明一下。
B. opacify/fade-in($color, $amount)透明化/漸隱函式和transparentize/fade-out($color, $amount)不透明化/漸現函式
$amount表示的是增加或者減少透明度的值，取值範圍是0~1。opacify/fade-in( )函式是要原始顏色的透明度加上$amount，transparentize/fade-out( )函式是要原始顏色的透明度減去$amount。
$colorMain: rgba(#3d48de, 0.3); $funcData: opacify, fade-in, transparentize, fade-out; @mixin func($funcName) { @if $funcName == opacify { background-color: opacify($colorMain, 0.5); }@else if $funcName == fade-in { background-color: fade-in($colorMain, 0.5); }@else if $funcName == transparentize { background-color: transparentize($colorMain, 0.2); }@else if $funcName == fade-out { background-color: fade-out($colorMain, 0.2); } } @each $value in $funcData { .div-#{$value} { @include func($value); } }
編譯後的CSS樣式：
.div-opacify { background-color: rgba(61, 72, 222, 0.8); } .div-fade-in { background-color: rgba(61, 72, 222, 0.8); } .div-transparentize { background-color: rgba(61, 72, 222, 0.1); } .div-fade-out { background-color: rgba(61, 72, 222, 0.1); }
不難看出，opacify/fade-in( )函式使得顏色的透明度變為0.8，顏色更加的透明；transparentize/fade-out( )函式使得顏色的透明度變為0.1，顏色更加不透明。
5. 其他顏色函式
關於顏色函式，除了上面三大類，還有下面四種：
- adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性；
- scale-color($color, [$red], [$green], [blue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性，獲取一個流暢的顏色；
- change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性；
- ie-hex-str($color) //將一個顏色轉換為ie濾鏡使用的顏色；
A. adjust-color( )函式和change-color( )函式
$red、$green、$blue，不用說，都知道是調整$color的RGB值，取值範圍在0~255之間。
$hue是色調值，在00~3590之前的正數或者負數。
$saturation、$lightness分別為飽和度和亮度，取值範圍在0~100%的正數或者負數。
$alpha是透明度，在0~1之間取值。
在上面的函式中，$color引數是必需的，後面可以跟一個引數，也可以是多個。不過，要注意，不能同時調整RGB值和HSL值。
$colorMain: rgba(#3d48de, 0.3); .div-01 { background-color: change-color($colorMain, $red: 123); } .div-02 { background-color: adjust-color($colorMain, $red: 123); }
編譯後的CSS樣式：
.div-01 { background-color: rgba(123, 72, 222, 0.3); } .div-02 { background-color: rgba(184, 72, 222, 0.3); }
觀察編譯之後的CSS樣式，同時給兩個函式中的$red賦值為123，發現change-color( )函式的R值被替換為123，而adjust-color( )函式為184。$colorMain變數的R值為61，所以184是123 + 61所得的結果。
我們可以得出以下結論：
change-color( )函式是將原來的函式的RGB值、HSL值、透明度值，直接被替換。
adjust-color( )函式是之後引數的賦值加上原來的函式相對應的值，最終獲取的顏色。
B. scale-color( )函式
scale-color( )和上面兩個函式的區別就是引數值的變化，除了$color引數，其他的引數取值範圍都是0~100%的正數或者負數。同樣的，不能同時調整RGB值和HSL值。（表示對這個函式的計算研究了好久T_T）
$colorMain: rgba(#3d48de, 0.3); $funcData: change-color, adjust-color, scale-color, ie-hex-str; @mixin func($funcName) { @if $funcName == change-color { background-color: change-color($colorMain, $red: 123); }@else if $funcName == adjust-color { background-color: adjust-color($colorMain, $red: 123); }@else if $funcName == scale-color { background-color: scale-color($colorMain, $red: 20%); }@else if $funcName == ie-hex-str { background-color: ie-hex-str($colorMain); } } @each $value in $funcData { .div-#{$value} { @include func($value); } }
編譯後的CSS樣式：
.div-change-color { background-color: rgba(123, 72, 222, 0.3); } .div-adjust-color { background-color: rgba(184, 72, 222, 0.3); } .div-scale-color { background-color: rgba(100, 72, 222, 0.3); } .div-ie-hex-str { background-color: #4D3D48DE; }
scale-color( )函式最後得的結果是將R值轉變為100，在RGB中，R的值為0~255，原來顏色的R值為61，首先獲取原顏色的R值和255之間差值，取得差值的20%，然後加上原來顏色的R值61,也就是(255 - 61) * 20% + 61= 100。如果$red為-20%，那將取的是原來顏色的R值與0之間的差值，用原來顏色R值減去差值的20%，也就是61 - (61 - 0) * 20% = 49，最後四捨五入。
總結如下：
$red、$green、$blue用0和255計算差值。
$saturation、$lightness、$alpha用0%和100%計算差值。
C. ie-hex-str($color)ie濾鏡函式
ie有自己的一套Filter濾鏡演算法，對於低版本的IE瀏覽器，我們可以使用ie濾鏡實現目前CSS3很多的效果，解決低版本瀏覽器對有些效果的不相容。
6. 一個簡單的應用
在Sass應用中，通常只需要定義一個顏色變數即可，然後之後的顏色，我們可以用函式計算獲得就好。這種方式的好處在於，如果我們之後需要修改顏色，只需要修改一處即可。
例如，現在需要定義一個網站中的一些顏色，我們需要確定主顏色。我們可以參考Sass中文官網來簡單說明一下，連結地址：http://sass.bootcss.com/docs/sass-reference/。
這是Sass中文官網的部分截圖，方框中是網頁中出現的顏色。可以看出，網頁主顏色為$colorMain: #c6538c，我們就可以根據主顏色來計算其他顏色了。
$colorMain: #c6538c; //網頁主顏色
$colorHover: darken($colorMain, 10%); //滑鼠經過顏色
$colorBgGray: lighten(grayscale($colorMain), 40%); //程式碼部分和選單滑鼠經過的背景顏色
$colorBorder: lighten(grayscale($colorMain), 30%) lighten(grayscale($colorMain), 35%); //邊框顏色
$colorTextLink: #008cba; //文字連結顏色
對於顏色，我定義了5個變數，這裡的半分比引數，我沒有精確設定，如果想要精確設定，可以利用上面的RGB函式來計算。對於文字連結的顏色，我並沒有用主顏色去算，連結的顏色一般都偏向於藍色，所以直接賦值就好。
如果我們將網站的主顏色修改為$colorMain: #008cba，那麼網頁其他的顏色也就跟著變換，這個對於我們之後更改顏色，會節省很多的時間。
