sass玩转颜色总结笔记
来源:互联网 发布:c语言short占几个字节 编辑:程序博客网 时间:2024/06/10 19:48
变量:
$color:#f00;
1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色
lighten($color,10%);
darken($color,30%);
2、颜色互补
complement(lighten($color,20%));
3、反色函数
invert(lighten($color,30%));
invert($color);
4、色调调节
ajust-due($color,90deg);
adjust-hue($color,180deg);
5、饱和函数和去饱和函数
desaturate($color,50%);
saturate($color,50%);
6、透明化函数和渐隐函数
transparentize($color,0.5);
7、不透明化函数和渐现函数
opacify($color,0.2);
fade-in($color,0.2);
编译后都是:
red;
8、灰度函数
grayscale($color);
9、rgba函数
rgba($color,0.5);
10、混合函数
可以使用混合mix函数将sass中的两种颜色混在一起
$color:#f00;
$color2:blue;
.one{ background: $color;}
.three{ background: $color2;}
.two{ background: mix($color,$color2);}
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);}
注意:调整颜色时,不能同时修改HSL值和RGB值。
12、遮阴函数和增亮函数
.one{ background: $color;}
.two{ background: shade($color,60%);}
.three{background: tint($color,60%);}
1 0
- sass玩转颜色总结笔记
- 【笔记】sass
- sass笔记
- SASS 笔记
- sass 颜色函数
- SASS实现颜色卡动画
- SASS简单总结
- sass 学习总结
- sass 学习总结1
- sass 学习总结2
- Sass学习总结
- sass语法总结
- sass常用函数总结
- sass语法总结
- 【14】sass语法总结
- sass学习总结
- sass自学入门总结
- sass初识笔记
- ollydbg原理分析~硬件断点与int3
- colspan =0 跨所有栏的效果
- 反渗透设备:纯净水处理单极反渗透设备特点概述
- iOS 之core Data操作(二)
- 替代NSLog
- sass玩转颜色总结笔记
- 使用源码安装MPICH2-1.4.1
- 多少妹纸在平安夜被骗出去说吃苹果
- 深入java--线程
- Java的类类型和类的动态加载
- TCP/UDP Socket编程步骤
- iOS 之UIViewController的生命周期
- Hadoop深入浅出之HDFS分析 第一讲:基本概念
- C# HexEdit