码迷,mamicode.com
首页 > 其他好文 > 详细

compass color 颜色 对比色[Sass和compass学习笔记]

时间:2014-06-11 08:35:12      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   color   

最基本的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);
}

在网页上的显示如下

bubuko.com,布布扣

可以看到根据判断不同的背景色,选择自体颜色是预定义的哪一个

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!