CSS变量不是“计算”颜色？

Question

我正在尝试使用取自 sass 的值分配块级 css 变量。但是下面这行color: hsl(3, 75%, var(--main-color-l)); 不会输出任何结果。我正在使用带有 scss 管道的静态站点生成器。有什么理由吗？谢谢！

.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);
}

}

Answer 1

这对我有用：

$red-h: 235;
$red-s: 100%;
$red-l: 50%;
$red-o: .5;

:root {
--main-color-h: $red-h;
--main-color-s: $red-s;
--main-color-l: $red-l;
--main-color-o: $red-o;
}

h4 {
    color: hsla($red-h, $red-s, $red-l, $red-o);
}