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 不住：）