sass玩转颜色总结笔记
2016-02-27 12:31
387 查看
变量:
$color:#f00;
1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色
lighten($color,10%);
darken($color,30%);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/c2212739659d40e99f7ce70f659998cc/clipboard.png)
![](http://img.blog.csdn.net/20141224134435943?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/792e819b18da4b62a09f174237b9ee50/clipboard.png)
![](http://img.blog.csdn.net/20141224134445625?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2、颜色互补
complement(lighten($color,20%));
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/8ed117b2349e4e53b2587b5902ec5ba4/clipboard.png)
![](http://img.blog.csdn.net/20141224134500014?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3、反色函数
invert(lighten($color,30%));
![](http://img.blog.csdn.net/20141224134512369?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/50113aa980204dad97623663b33959eb/clipboard.png)
invert($color);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/9b598128ae7f438cb77e83e2d1e7d775/clipboard.png)
![](http://img.blog.csdn.net/20141224134521542?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
4、色调调节
ajust-due($color,90deg);
![](http://img.blog.csdn.net/20141224134528609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/988c2dbea34b44328e20b82eb8818ee5/clipboard.png)
adjust-hue($color,180deg);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/092c403bcae6442986b72d606792a14b/clipboard.png)
![](http://img.blog.csdn.net/20141224134539810?<br/><br/>watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
5、饱和函数和去饱和函数
desaturate($color,50%);
![](http://img.blog.csdn.net/20141224134549250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/5ee29faf2d674a2a9744339a8e8c80d4/clipboard.png)
saturate($color,50%);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/a35001aab05d420d9f1c0d5130ba8583/clipboard.png)
![](http://img.blog.csdn.net/20141224134558312?<br/><br/>watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
6、透明化函数和渐隐函数
transparentize($color,0.5);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/ae34e06ab4964b0ea06d8248967708ef/clipboard.png)
![](http://img.blog.csdn.net/20141224134610635?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
7、不透明化函数和渐现函数
opacify($color,0.2);
fade-in($color,0.2);
编译后都是:
red;
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/6bbc1f1da33e4024a9be7bb15c75801e/clipboard.png)
![](http://img.blog.csdn.net/20141224134619687?<br/><br/>watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
8、灰度函数
grayscale($color);
![](http://img.blog.csdn.net/20141224134632694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/4a2c60b87d9b422ba32b72d7cfd799d0/clipboard.png)
9、rgba函数
rgba($color,0.5);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/e61c289f8b394d9c86305bdd07814356/clipboard.png)
![](http://img.blog.csdn.net/20141224134638140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
10、混合函数
能够使用混合mix函数将sass中的两种颜色混在一起
$color:#f00;
$color2:blue;
.one{ background: $color;}
.three{ background: $color2;}
.two{ background: mix($color,$color2);}
![](http://img.blog.csdn.net/20141224134648000?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/f42f33cfef27446e876d043a777bfbf7/clipboard.png)
11、调色函数
调色(adjust-color)函数同意改动颜色属性。所以用这个函数改动红色、绿色、蓝色(组成RGB颜色空间的属性)、色调、饱和度和亮度等。
每一种颜色属性调节方式都有对应的參数。
(1)$red、$green、$blue:红、绿、蓝值应该在0到255之间
(2)$hue:色调值应该是一个数值在0到359之间的正数或负数值
(3)$saturation、$lightness:饱和度和亮度应该是一个数值在0到100%间的正数或者负数值。
(4)$alpha:一个0到1之间的值
.one{ background: $color;}
.two{ background: adjust-color($color,$hue:40);}
![](http://img.blog.csdn.net/20141224134705735?<br/><br/>watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3V3ZWl0aWFuZGlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/1a08ff7ec978408987a2d20867b4ff4e/clipboard.png)
注意:调整颜色时,不能同一时候改动HSL值和RGB值。
12、遮阴函数和增亮函数
.one{ background: $color;}
.two{ background: shade($color,60%);}
.three{background: tint($color,60%);}
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/39f70522459d43f2a81e3270dde9a88f/clipboard.png)
$color:#f00;
1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色
lighten($color,10%);
darken($color,30%);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/c2212739659d40e99f7ce70f659998cc/clipboard.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/792e819b18da4b62a09f174237b9ee50/clipboard.png)
2、颜色互补
complement(lighten($color,20%));
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/8ed117b2349e4e53b2587b5902ec5ba4/clipboard.png)
3、反色函数
invert(lighten($color,30%));
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/50113aa980204dad97623663b33959eb/clipboard.png)
invert($color);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/9b598128ae7f438cb77e83e2d1e7d775/clipboard.png)
4、色调调节
ajust-due($color,90deg);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/988c2dbea34b44328e20b82eb8818ee5/clipboard.png)
adjust-hue($color,180deg);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/092c403bcae6442986b72d606792a14b/clipboard.png)
5、饱和函数和去饱和函数
desaturate($color,50%);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/5ee29faf2d674a2a9744339a8e8c80d4/clipboard.png)
saturate($color,50%);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/a35001aab05d420d9f1c0d5130ba8583/clipboard.png)
6、透明化函数和渐隐函数
transparentize($color,0.5);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/ae34e06ab4964b0ea06d8248967708ef/clipboard.png)
7、不透明化函数和渐现函数
opacify($color,0.2);
fade-in($color,0.2);
编译后都是:
red;
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/6bbc1f1da33e4024a9be7bb15c75801e/clipboard.png)
8、灰度函数
grayscale($color);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/4a2c60b87d9b422ba32b72d7cfd799d0/clipboard.png)
9、rgba函数
rgba($color,0.5);
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/e61c289f8b394d9c86305bdd07814356/clipboard.png)
10、混合函数
能够使用混合mix函数将sass中的两种颜色混在一起
$color:#f00;
$color2:blue;
.one{ background: $color;}
.three{ background: $color2;}
.two{ background: mix($color,$color2);}
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/f42f33cfef27446e876d043a777bfbf7/clipboard.png)
11、调色函数
调色(adjust-color)函数同意改动颜色属性。所以用这个函数改动红色、绿色、蓝色(组成RGB颜色空间的属性)、色调、饱和度和亮度等。
每一种颜色属性调节方式都有对应的參数。
(1)$red、$green、$blue:红、绿、蓝值应该在0到255之间
(2)$hue:色调值应该是一个数值在0到359之间的正数或负数值
(3)$saturation、$lightness:饱和度和亮度应该是一个数值在0到100%间的正数或者负数值。
(4)$alpha:一个0到1之间的值
.one{ background: $color;}
.two{ background: adjust-color($color,$hue:40);}
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/1a08ff7ec978408987a2d20867b4ff4e/clipboard.png)
注意:调整颜色时,不能同一时候改动HSL值和RGB值。
12、遮阴函数和增亮函数
.one{ background: $color;}
.two{ background: shade($color,60%);}
.three{background: tint($color,60%);}
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/qq0E38156C51F9A267898423448B27B2B3/39f70522459d43f2a81e3270dde9a88f/clipboard.png)
相关文章推荐
- what does Html.HiddenFor () for ?
- ox69a8674c指定应用的0x00000000内存不能为"read"
- centos的PHP编译安装模块的基本步骤
- 服务器集群session共享方案
- mysql中间件研究(Atlas,cobar,TDDL)
- 打开QQ空间的默认浏览器被改了怎么办
- 蓝桥杯 题目标题: 排它平方数 最新真题
- 泛型:两个数字相加
- mysql变量使用总结
- Python collections.defaultdict() 与 dict的使用和区别
- Knapsack problem (FZU_2214,福建省第六届ACM-problemC) 01背包+初始化问题+渐缩问题
- K中心点
- sql查询重复记录
- ubuntu配置NFS,挂载开发板
- net share命令删除共享
- Objective—C通讯录简单编程(源码)
- 问题: org.xml.sax.SAXParseException: cvc-complex-type.2.4.c: The matching wildcard is strict, but no
- 条件概率和Bayes法则(Bayes' rule)
- 编译安装mysql ERROR: 1 Can't create/write to file '/tmp/#sql_86b_0.MYI'
- 【高性能】Extreme交换机从头到尾配置