顏色

顏色在 CSS 中占有重要地位。當(dāng)涉及到操縱色彩時(shí)，Sass 通過(guò)提供少數(shù)的函數(shù)功能，最終成為了極具價(jià)值的助手。

顏色格式

為了盡可能簡(jiǎn)單地使用顏色，我建議顏色格式要按照以下順序排列：

1. CSS 顏色關(guān)鍵字;
2. HSL 值;
3. RGB 值;
4. 十六進(jìn)制。小寫(xiě)并盡可能簡(jiǎn)寫(xiě)。

對(duì)于初學(xué)者來(lái)說(shuō)，顏色關(guān)鍵字往往比較通俗易懂。HSL 表 示方式不僅僅是人類(lèi)大腦最易于接受的，它也可以讓樣式表作者輕松地調(diào)整色調(diào)、飽和度和亮度來(lái)修改顏色。如果一個(gè)顏色偏藍(lán)、偏綠或者偏紅，那么使用RGB?更容易表示出來(lái)，但是卻不容易表示三者的混合色。最后，十六進(jìn)制是人類(lèi)大腦理解的極限了。

// Yep
.foo {
  color: red;
}

// Nope
.foo {
  color: #FF0000;
}

使用 HSL 值或者 RGB 值，通常在逗號(hào) (,)后面追加一個(gè)空格，而不在前后括號(hào) ((,?)) 和值之間添加空格。

// 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% );
}

顏色和變量

當(dāng)一個(gè)顏色被多次調(diào)用時(shí)，最好用一個(gè)有意義的變量名來(lái)保存它。

$sass-pink: #c69;

現(xiàn)在，你就可以在任何需要的地方隨意使用這個(gè)變量了。不過(guò)，如果你是在一個(gè)主題中使用，我不建議固定的使用這個(gè)變量。相反，可以使用另一個(gè)標(biāo)識(shí)方式的變量來(lái)保存它。

$main-theme-color: $sass-pink;

這樣做可以防止一個(gè)主題變化而出現(xiàn)此類(lèi)結(jié)果?$sass-pink: blue。

變亮和變暗顏色

lighten?和?darken?函數(shù)都是通過(guò)增加或者減小HSL中顏色的亮度來(lái)實(shí)現(xiàn)調(diào)節(jié)的?；旧?，它們就是?adjust-color?函數(shù)添加了?$lightness?參數(shù)的別名。

問(wèn)題是，這些函數(shù)經(jīng)常并不能實(shí)現(xiàn)預(yù)期的結(jié)果。另一方面，通過(guò)混合白色?或?黑色實(shí)現(xiàn)變量或變暗的?mix?函數(shù)，是一個(gè)不錯(cuò)的方法。

和上述兩個(gè)函數(shù)相比，使用?mix?的好處是，當(dāng)你降低顏色的比例時(shí)，它會(huì)漸進(jìn)的接近黑色（或者白色），而?darken?和?lighten?立即變換顏色到黑色或白色。

有關(guān)?lighten/darken?和?mix?之間差異的示例來(lái)源于?KatieK

如果你不想每次都寫(xiě)?mix?函數(shù)，你可以創(chuàng)建兩個(gè)易用的?tint?和?shade?(Compass的一部分)來(lái)處理相同的事：

/// 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?函數(shù)的設(shè)計(jì)初衷是為了更流暢地調(diào)試屬性——以實(shí)際的高低為調(diào)試基礎(chǔ)。它如同mix一樣好用，并且提供了更清晰地調(diào)用約定。比例因子并不完全相同。

擴(kuò)展閱讀

• A Visual Guide to Sass & Compass Color Functions
• How to Programmatically Go From One Color to Another
• Sass Color Variables That Don’t Suck
• Using Sass to Build Color Palettes
• Dealing with Color Schemes in Sass