css - 为什么 light($color,50%) 解析为白色？

Question

这个 sass 片段:

$red: #f00

$lightred: lighten($red, 50%)

body
  background: $lightred

解析为:

body {
  background: white; }

如果您改为执行 45% 而不是 50%，它似乎会按预期工作:

$lightred2: lighten($red, 45%)
...
background-color: #ffe5e5

为什么这会变成白色而不是预期的 50% 的红色？

您可以在此处查看实际效果 http://tinkerbin.com/OefelPoi

(注意 - 保存功能似乎有错误，在 css 区域，再次选择 Sass Old Syntax，然后重新运行)

更新 -

最终我想要的是将白色与原始颜色混合以获得有色阴影:

mix($color,white, 10%)

Answer 1

因为变亮功能是在 HSL 颜色上描述的，而你的红色 #f90 被翻译为 hsl(0, 100%, 50%)

因此 lighten($lightred, 50%) 等于 hsl(0, 0, 100%)，或白色