SCSS & SASS Color 顏色函數用法

最近作一個沒有設計師參與的項目，發現 scss 內置的顏色函數還挺好用。記錄分享下

rgba() 

能省掉手工轉換 hex 到 rgb 格式的工做，如如下 SCSS 代碼

$linkColor: #20a0ff;

.box{
  box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3);
  background-color: $linkColor;
}

生成的 CSS 代碼

.box{
  box-shadow:0 2px 6px 0 rgba(32,160,255,.3);
  background-color:#20a0ff;
}

還能夠經過 opacify 增長，經過 transparentize 來減小透明度值，如：

>> opacify(rgba(125,125,125, 0.6), 0.2)
rgba(125,125,125, 0.8)

>> transparentize(green, 0.5)
rgba(0, 255, 0, 0.5)

 

lighten / darken / saturate / desaturate 

lighten / darken 是基於 HSL 明度變換，這個比較適合 button 按鈕的 normal 態和 hover 態變換，

saturate / desaturate 是基於 HSL 飽和度 變換，

效果能夠參考這個在線工具 http://scg.ar-ch.org/

然而生成的顏色很醜，不實用。

 

tint / shade

阿里的 Ant Design 早期版本使用了 tint / shade 色彩算法，經過增長 白色（tint） 和 黑色（shade） 的佔比來生成系列色。

.demo{
  tint( $base-color, 10% )
  shade( $base-color, 10% )
}

 

這個在項目中會更加實用，不過要注意新生成的顏色與文本對比度需知足 WCAG 2.0 對比度要求。

在線 checker：http://webaim.org/resources/contrastchecker/

 

complement 補色

在色彩理論中，若是一種顏色與另外一種顏色混合後，呈現中性的灰黑色，那麼這兩種顏色就互爲補色。

好萊塢電影比較經常使用補色後期手法，強烈的互補色對比，能渲染出比較衝擊的視覺系氛圍。以下圖《天使愛漂亮麗》海報的紅綠互補。

 

不過如今還沒用到這個函數，怕有點 hold 不住：）