变量:
$color:#f00;


1、变浅和加深颜色,sass使用HSL标准来变浅或加深颜色
lighten($color,10%);
darken($color,30%);
sass玩转颜色总结笔记                    sass玩转颜色总结笔记    sass玩转颜色总结笔记sass玩转颜色总结笔记

2、颜色互补
complement(lighten($color,20%));
sass玩转颜色总结笔记sass玩转颜色总结笔记

3、反色函数
 invert(lighten($color,30%));
sass玩转颜色总结笔记
sass玩转颜色总结笔记
 invert($color);
sass玩转颜色总结笔记sass玩转颜色总结笔记

4、色调调节
ajust-due($color,90deg);
sass玩转颜色总结笔记
sass玩转颜色总结笔记
adjust-hue($color,180deg);
sass玩转颜色总结笔记sass玩转颜色总结笔记

5、饱和函数和去饱和函数
desaturate($color,50%);
sass玩转颜色总结笔记
sass玩转颜色总结笔记
saturate($color,50%);
sass玩转颜色总结笔记sass玩转颜色总结笔记

6、透明化函数和渐隐函数
transparentize($color,0.5);
sass玩转颜色总结笔记sass玩转颜色总结笔记

7、不透明化函数和渐现函数
opacify($color,0.2);
fade-in($color,0.2);
编译后都是:
red;
sass玩转颜色总结笔记
sass玩转颜色总结笔记
8、灰度函数
grayscale($color);
sass玩转颜色总结笔记
sass玩转颜色总结笔记
9、rgba函数
rgba($color,0.5);
sass玩转颜色总结笔记sass玩转颜色总结笔记

10、混合函数
能够使用混合mix函数将sass中的两种颜色混在一起
$color:#f00;
$color2:blue;
.one{ background: $color;}
.three{ background: $color2;}
.two{ background: mix($color,$color2);}
sass玩转颜色总结笔记
sass玩转颜色总结笔记

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);}
sass玩转颜色总结笔记
sass玩转颜色总结笔记
注意:调整颜色时,不能同一时候改动HSL值和RGB值。

12、遮阴函数和增亮函数
.one{ background: $color;}
.two{ background: shade($color,60%);}
.three{background: tint($color,60%);}
sass玩转颜色总结笔记
sass玩转颜色总结笔记




相关文章:

  • 2022-01-20
  • 2021-09-19
  • 2022-12-23
  • 2021-04-26
  • 2021-06-16
  • 2022-12-23
  • 2021-06-12
  • 2022-12-23
猜你喜欢
  • 2021-07-06
  • 2022-12-23
  • 2022-12-23
  • 2021-08-14
  • 2021-08-13
相关资源
相似解决方案