CSS变量传入hsl()函数无法正常计算颜色值的原因排查

代码不生效是两个问题共同导致的：

• 单位不符合原生CSS的hsl()语法要求：从你h4选择器的写法hsla($red-h, $red-s, $red-l * 1.3, $red-o)可以判断，你定义的Sass变量$red-l是不带百分号的纯数值（常见取值为40、60这类0-100区间的数字），Sass编译内置颜色函数时会自动给饱和度、亮度参数补%单位，但你直接把纯数值赋值给CSS变量--main-color-l后，浏览器运行时拿到的变量值是无单位的数字，不符合原生CSS要求hsl亮度参数必须带百分比单位的规则，因此颜色属性直接失效。
• Sass与原生CSS的处理阶段差异：只要Sass的内置颜色函数（hsl/hsla/rgb/rgba等）的参数中出现var()语法，Sass就不会在编译阶段对这个函数做任何处理，会把代码原封不动输出给浏览器解析，不会像处理纯Sass变量时那样自动补单位、做类型转换，所有参数必须完全符合原生CSS语法才能正常生效。

二选一即可：

1. 给CSS变量补全单位，从根源修正变量值合法性，修改后代码如下：

.reveal .palette1 {
    --main-color-h: #{$red-h};
    --main-color-s: #{$red-s + '%'};
    --main-color-l: #{$red-l + '%'};
    --main-color-o: $red-o;
    h2 {
        color: hsl(3, 75%, var(--main-color-l));
    }
    h4 {
        color: hsla($red-h, $red-s, $red-l * 1.3, $red-o);
    }
}

代码里用#{}插值语法是为了避免Sass对CSS变量值做多余的编译转换，保证输出的变量值是浏览器可识别的原生CSS值。

2. 不改变量定义，在使用变量时通过calc()补全单位：

h2 {
    color: hsl(3, 75%, calc(var(--main-color-l) * 1%));
}

这种写法会在浏览器运行时把无单位的数值乘以1%，自动拼接成合法的百分比值。

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