开发者社区> 互联网fans> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题 api 地址 http://compass-style.
+关注继续查看

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

在网页上的显示如下

image

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

demo 源码 地址 https://github.com/qqqzhch/webfans

test

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Comparable 比较器|学习笔记
快速学习 Comparable 比较器
66 0
WinForm——TreeView总结
WinForm——TreeView总结
71 0
Anonymous Inner Class(匿名内部类)是否可以继承其它类?是否可以实现接口?
可以继承其他类或实现其他接口,在Swing编程和Android开发中常用此方式来实现事件监听和回调。
1068 0
Compass(更新中。。。)
compass Compass是Sass的工具库,就好像jQuery是js的库一样。 sass有了compass的配合,就会更加事半功倍。 Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。
1400 0
Sass-学习笔记【进阶篇】
特别说明: 没有sass基础请移步:【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图(实在是结构图太长了没办法)2017-07-07  20:17:17    正文 一、Sass的控制命令  2017-06-22  09:11:43 1.@if语句  @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。
1015 0
compass General 常用api学习[Sass和compass学习笔记]
compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览...
869 0
WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/7971771 WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色      在B/S开发中,对TreeView控件要改变当前选中节点的颜色比较方便,其有相应的SelectedNodeChanged事件进行控制,但对于WinForm则没有这样方便。
1000 0
+关注
互联网fans
迷失在大前端海洋中的孩子
172
文章
29
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载