4-9 HSL函数-grayscale()函数
本节编程练习不计算学习进度,请电脑登录imooc.com操作

HSL函数-grayscale()函数

这个函数会颜色的饱和度值直接调至 0%,所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。例如:

//SCSS
$baseColor: #ad141e;
.grayscale {
  background: grayscale($baseColor);
}
.desaturate {
  background: desaturate($baseColor,100%);
}

编译出来的 css 代码:

//CSS
.grayscale {
  background: #616161;
}

.desaturate {
  background: #616161;
}


看看计算出来的 HSL 各个值的变化:

>> hue(#ad141e)
356.07843deg
>> hue(#616161)
0deg
>> saturation(#ad141e)
79.27461%
>> saturation(#616161)
0%
>> lightness(#ad141e)
37.84314%
>> lightness(#616161)
38.03922%

grayscale() 函数处理过的颜色,其最大的特征就是颜色的饱和度为 0。

任务

小伙伴们,你们能说出下面运行出来的CSS代码吗?

  1. //SCSS
  2. $baseColor: #123456;
  3. .grayscale {
  4. background: grayscale($baseColor);
  5. }
  6. .desaturate {
  7. background: desaturate($baseColor,50%);
  8. }
下一节