sass中的 lighten 函数是怎么计算的？

Question

sass中的 lighten 函数是怎么计算的？

比如：

lighten(#800, 20%) => #e00

这个是怎么得到 #e00 的啊？？

Answer 1

推测是：hex -> rgb -> hsl
其中 l 表示亮度，对亮度计算后再转换回来
具体可以看下sass下面的内置函数

参考路径 C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.10\lib\sass\script

http://jsfiddle.net/yLyqv47m/

Answer 2

1. 先将十六位颜色值转换为 hsl 表达法
2. 提取出 lightness（亮度）值
3. 再将亮度值加上（lighten）或减去（darken）相应的百分比。

可以使用sass -i命令行工具进行验证：

# 随便输入一个颜色值，查看它的亮度是多少
> lightness(#123456)
20.39216%

# 将它的亮度提高 50%
> lighten(#123456, 50%)
#82b4e5

# 查看新得到的颜色值的亮度
> lightness(#82b4e5)
70.39216%

可见lighten与darken只是单纯地对颜色的亮度进行加减计算。而且亮度的下限和上限为0~100%。