taoqidejingling 2019-06-09
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用。记录分享下
能省掉手工转换 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 是基于 HSL 明度变换,这个比较适合 button 按钮的 normal 态和 hover 态变换,
saturate / desaturate 是基于 HSL 饱和度 变换,
效果可以参考这个在线工具 http://scg.ar-ch.org/
然而生成的颜色很丑,不实用。
阿里的 Ant Design 早期版本使用了 tint / shade 色彩算法,通过增加 白色(tint) 和 黑色(shade) 的占比来生成系列色。
.demo{ tint( $base-color, 10% ) shade( $base-color, 10% ) }
这个在项目中会更加实用,不过要注意新生成的颜色与文本对比度需满足 WCAG 2.0 对比度要求。
在线 checker:http://webaim.org/resources/contrastchecker/
在色彩理论中,如果一种颜色与另一种颜色混合后,呈现中性的灰黑色,那么这两种颜色就互为补色。
好莱坞电影比较常用补色后期手法,强烈的互补色对比,能渲染出比较冲击的视觉系氛围。如下图《天使爱美丽》海报的红绿互补。
不过现在还没用到这个函数,怕有点 hold 不住:)