CSS变量计算HSL值

Question

我希望能获得一个基础的 HSL 色值，以实现以下渐变效果：

:root {
    --hue: 201;
    --saturation: 31;
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */

    --lightnessPlus: calc(var(--lightness) + var(--difference));
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc(var(--lightness) - var(--difference));
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

[...]
.class {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

上述代码生成了一个透明对象，我不理解为什么会这样，请帮忙!

- Viktor

Answer 1

你缺少了百分比符号。正确的语法应该是hsl(h, s%, l%) (https://www.w3.org/TR/css-color-3/)。

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40; 
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20;

    --lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc((var(--lightness) - var(--difference))*1%);  /* here */
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

或者

:root {
    --hue: 201;
    --saturation: 31%; /* here */
    --lightness: 40%; /* here */
    --mainColor: hsl(var(--hue),var(--saturation),var(--lightness));

    --difference: 20%; /* here */

    --lightnessPlus: calc(var(--lightness) + var(--difference)); 
    --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));

    --lightnessMinus: calc(var(--lightness) - var(--difference)); 
    --colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}

body {
    background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}

- Temani Afif