顏色在 CSS 中占有重要地位。當涉及到操縱色彩時，Sass 通過提供少數的[函數功能](http://sass-lang.com/documentation/Sass/Script/Functions.html)，最終成為了極具價值的助手。 ## 顏色格式 為了盡可能簡單地使用顏色，我建議顏色格式要按照以下順序排列： 1. [CSS 顏色關鍵字](http://www.w3.org/TR/css3-color/#svg-color); 2. [HSL 值](http://en.wikipedia.org/wiki/HSL_and_HSV); 3. [RGB 值](http://en.wikipedia.org/wiki/RGB_color_model); 4. 十六進制。小寫并盡可能簡寫。 對于初學者來說，顏色關鍵字往往比較通俗易懂。HSL 表 示方式不僅僅是人類大腦最易于接受的，它也可以讓樣式表作者輕松地調整色調、飽和度和亮度來修改顏色。如果一個顏色偏藍、偏綠或者偏紅，那么使用`RGB`?更容易表示出來，但是卻不容易表示三者的混合色。最后，十六進制是人類大腦理解的極限了。 ~~~ // Yep .foo { color: red; } // Nope .foo { color: #FF0000; } ~~~ 使用 HSL 值或者 RGB 值，通常在逗號 (`,`)后面追加一個空格，而不在前后括號 (`(`,?`)`) 和值之間添加空格。 ~~~ // Yep .foo { color: rgba(0, 0, 0, 0.1); background: hsl(300, 100%, 100%); } // Nope .foo { color: rgba(0,0,0,0.1); background: hsl( 300, 100%, 100% ); } ~~~ ## 顏色和變量 當一個顏色被多次調用時，最好用一個有意義的變量名來保存它。 ~~~ $sass-pink: #c69; ~~~ 現在，你就可以在任何需要的地方隨意使用這個變量了。不過，如果你是在一個主題中使用，我不建議固定的使用這個變量。相反，可以使用另一個標識方式的變量來保存它。 ~~~ $main-theme-color: $sass-pink; ~~~ 這樣做可以防止一個主題變化而出現此類結果?`$sass-pink: blue`。 ## 變亮和變暗顏色 [`lighten`](http://sass-lang.com/documentation/Sass/Script/Functions.html#lighten-instance_method)?和?[`darken`](http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method)?函數都是通過增加或者減小HSL中顏色的亮度來實現調節的。基本上，它們就是?[`adjust-color`](http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method)?函數添加了?`$lightness`?參數的別名。 問題是，這些函數經常并不能實現預期的結果。另一方面，通過混合`白色`?或?`黑色`實現變量或變暗的?[`mix`](http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method)?函數，是一個不錯的方法。 和上述兩個函數相比，使用?`mix`?的好處是，當你降低顏色的比例時，它會漸進的接近黑色（或者白色），而?`darken`?和?`lighten`?立即變換顏色到黑色或白色。 有關?`lighten`/`darken`?和?`mix`?之間差異的示例來源于?[KatieK](http://codepen.io/KatieK2/pen/tejhz/) 如果你不想每次都寫?`mix`?函數，你可以創建兩個易用的?`tint`?和?`shade`?([Compass](http://compass-style.org/reference/compass/helpers/colors/#shade)的一部分)來處理相同的事： ~~~ /// Slightly lighten a color /// @access public /// @param {Color} $color - color to tint /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function tint($color, $percentage) { @return mix(white, $color, $percentage); } /// Slightly darken a color /// @access public /// @param {Color} $color - color to shade /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function shade($color, $percentage) { @return mix(black, $color, $percentage); } ~~~ [`scale-color`](http://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method)?函數的設計初衷是為了更流暢地調試屬性——以實際的高低為調試基礎。它如同`mix`一樣好用，并且提供了更清晰地調用約定。比例因子并不完全相同。 ## 擴展閱讀 * [A Visual Guide to Sass & Compass Color Functions](http://jackiebalzer.com/color) * [How to Programmatically Go From One Color to Another](http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass) * [Sass Color Variables That Don’t Suck](http://davidwalsh.name/sass-color-variables-dont-suck) * [Using Sass to Build Color Palettes](http://www.sitepoint.com/using-sass-build-color-palettes/) * [Dealing with Color Schemes in Sass](http://www.sitepoint.com/dealing-color-schemes-sass/)