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)

 

看一下简单的例子

$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