标签:style class blog code http color
最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题
api 地址
http://compass-style.org/reference/compass/utilities/color/contrast/
要是真的能实现任何一个背景色 都可以选出来一个对比色 那就好了,
不过compass 并没有实现这个功能,而是先定义了一个淡色和深色,然后根据你传入的颜色判断,是给你返回深色好呢,还是返回淡色好呢 ,这个api比较适合写底层
@import "compass/utilities/color/contrast"
看一下简单的例子
|
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
compass color 颜色 对比色[Sass和compass学习笔记],布布扣,bubuko.com
compass color 颜色 对比色[Sass和compass学习笔记]
标签:style class blog code http color
原文地址:http://www.cnblogs.com/qqloving/p/3773151.html