顏色

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

顏色格式

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

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

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

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

顏色和變量

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

$sass-pink: #c69;

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

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

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

變亮和變暗顏色

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

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

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

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

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

/// 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è)計初衷是為了更流暢地調(diào)試屬性——以實際的高低為調(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