最近做一個沒有設計師參與的項目，發現 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 不住：）

?

轉載于:https://www.cnblogs.com/kaiye/p/7553041.html

總結

以上是生活随笔為你收集整理的SCSS SASS Color 颜色函数用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。