HSL 变量插值输出的颜色不准确
作者: Maluscat创建于 2019年4月7日更新于 2026年5月11日
标签buglow priority
LESS 3.8.1 版本引入了以作者形式输出 HSL 颜色值,而不是其 HEX 版本(例如,hsl(0, 0%, 76%) 现在输出为 hsl(0, 0%, 76%),而不是 #c2c2c2),这是一个非常酷的功能。然而,使用可变插值的 HSL 颜色有时(根据颜色参数而定)会输出颜色稍微不准确(而且非常丑陋):
(v3.8.1+)
@color1: hsl(56, 8%, 14%);
@color2: hsl(0, 8%, 1%);
.color-element {
color: ~"@{color1}";
color: ~"@{color2}";
}预期结果:
.color-element {
color: hsl(56, 8%, 14%);
color: hsl(0, 8%, 1%);
}实际结果:
.color-element {
color: hsl(55.99999999999997, 8.00000000000001%, 14.000000000000002%);
color: hsl(8.000000000000004%, 2%);
}这在带有波浪线和没有波浪线的情况下都会发生,很明显。我在此处使用了两种不同的颜色来证明并非所有值都会以这种方式输出,例如,hsl(0, 8%, 17%) 完全没问题 - 请注意,这里的值取决于其他值(具有 17% 的明度,8% 的饱和度突然就可以了)。
然而,不使用可变插值的情况则如预期。
内容来源: less/less.js