compass color 颜色 对比色[Sass和compass学习笔记]
最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题
api 地址
http://compass-style.org/reference/compass/utilities/color/contrast/
要是真的能实现任何一个背景色 都可以选出来一个对比色 那就好了,
不过compass 并没有实现这个功能,而是先定义了一个淡色和深色,然后根据你传入的颜色判断,是给你返回深色好呢,还是返回淡色好呢 ,这个api比较适合写底层
@import "compass/utilities/color/contrast"
contrasted($background-color, $dark, $light, $threshold)
看一下简单的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $contrasted-dark- default : #333333; $contrasted-light- default : #e7e7e7; .ctest1{ @include contrasted( #511210); } .ctest2{ @include contrasted( #105813); } .ctest3{ @include contrasted( #151053); } .ctest4{ @include contrasted( #B96624); } .ctest5{ @include contrasted( #312E2E); } .ctest6{ @include contrasted( #EBEB1C); } .ctest7{ @include contrasted( #571210); } .ctest8{ @include contrasted( #581210); } |
在网页上的显示如下
可以看到根据判断不同的背景色,选择自体颜色是预定义的哪一个
demo 源码 地址 https://github.com/qqqzhch/webfans
test
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步