颜色在 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/)