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