设为首页 加入收藏

TOP

SCSS & SASS Color 颜色函数用法
2019-06-10 18:07:56 】 浏览:77
Tags:SCSS SASS Color 颜色 函数 用法

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用。记录分享下


能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码


生成的 CSS 代码


还可以通过 opacify 增加,通过 transparentize 来减少透明度值,如:


 


lighten / darken 是基于 HSL 明度变换,这个比较适合 button 按钮的 normal 态和 hover 态变换,


saturate / desaturate 是基于 HSL 饱和度 变换,


效果可以参考这个在线工具 http://scg.ar-ch.org/


然而生成的颜色很丑,不实用。


 


阿里的 Ant Design 早期版本使用了 tint / shade 色彩算法,通过增加 白色(tint) 和 黑色(shade) 的占比来生成系列色。



 


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


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


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


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


 



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



编程开发网
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Python 2 和 Python 3 的一些主要.. 下一篇Python使用PyQtGraph绘制股票行情..