Sass中HSL函数输出异常：设置红色却编译为白色

嘿，我之前也踩过这个坑！你写的$red: hsl(0deg, 100, 100);里藏着两个关键问题，才导致编译后呈现白色：

1. 饱和度和亮度参数缺少单位 #

Sass的hsl()函数里，第二个饱和度参数和第三个亮度参数必须带单位——要么是%，要么是0到1之间的小数。当你只写纯数字100时，Sass会把它默认解析为0%（无单位数值在这两个参数里会被视为0），相当于你实际写了：

$red: hsl(0deg, 0%, 100%);

低饱和度+全亮度的组合，结果自然是白色。

2. 亮度参数数值错误 #

就算补上单位，hsl(0deg, 100%, 100%)也不是红色——全亮度状态下，不管饱和度多高，颜色都会被拉成白色。标准纯红色的亮度应该是50%，这时候才能得到#FF0000。

正确的写法 #

下面两种方式都能得到你想要的纯红色：

• 带百分比单位的标准写法：

  $red: hsl(0deg, 100%, 50%);
  

• 用0-1小数代替百分比的简化写法（色相也可以省略deg单位）：

  $red: hsl(0, 1, 0.5);
  

编译之后就能得到正确的#FF0000红色啦！

内容的提问来源于stack exchange，提问作者pavolve