SCSS & SASS Color 颜色函数用法

taoqidejingling 2019-06-09

最近做一个没有设计师参与的项目,发现 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% )
}

SCSS & SASS Color 颜色函数用法

 

这个在项目中会更加实用,不过要注意新生成的颜色与文本对比度需满足 WCAG 2.0 对比度要求。

在线 checker:http://webaim.org/resources/contrastchecker/

complement 补色

在色彩理论中,如果一种颜色与另一种颜色混合后,呈现中性的灰黑色,那么这两种颜色就互为补色。

好莱坞电影比较常用补色后期手法,强烈的互补色对比,能渲染出比较冲击的视觉系氛围。如下图《天使爱美丽》海报的红绿互补。

 

SCSS & SASS Color 颜色函数用法

不过现在还没用到这个函数,怕有点 hold 不住:)

相关推荐