最近做一個(gè)沒有設(shè)計(jì)師參與的項(xiàng)目，發(fā)現(xiàn) scss 內(nèi)置的顏色函數(shù)還挺好用。記錄分享下

rgba()?

能省掉手工轉(zhuǎn)換 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 明度變換，這個(gè)比較適合 button 按鈕的 normal 態(tài)和 hover 態(tài)變換，

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

效果可以參考這個(gè)在線工具?http://scg.ar-ch.org/

然而生成的顏色很丑，不實(shí)用。

?

tint / shade

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

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

?

這個(gè)在項(xiàng)目中會更加實(shí)用，不過要注意新生成的顏色與文本對比度需滿足 WCAG 2.0 對比度要求。

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

?

complement 補(bǔ)色

在色彩理論中，如果一種顏色與另一種顏色混合后，呈現(xiàn)中性的灰黑色，那么這兩種顏色就互為補(bǔ)色。

好萊塢電影比較常用補(bǔ)色后期手法，強(qiáng)烈的互補(bǔ)色對比，能渲染出比較沖擊的視覺系氛圍。如下圖《天使愛美麗》海報(bào)的紅綠互補(bǔ)。

?

不過現(xiàn)在還沒用到這個(gè)函數(shù)，怕有點(diǎn) hold 不住：）

?

轉(zhuǎn)載于:https://www.cnblogs.com/kaiye/p/7553041.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。