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