less中color函数字体颜色计算

待整理：https://blog.csdn.net/fu415037685/article/details/81942025

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

lighten(@color, 10%); // return a color which is 10% lighter than @color
darken(@color, 10%); // return a color which is 10% darker than @color

saturate(@color, 10%); // return a color 10% more saturated than @color
desaturate(@color, 10%); // return a color 10% less saturated than @color

fadein(@color, 10%); // return a color 10% less transparent than @color
fadeout(@color, 10%); // return a color 10% more transparent than @color
fade(@color, 50%); // return @color with 50% transparency

spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2); // return a mix of @color1 and @color2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
使用起来相当简单:

@base: #f04615;

.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}
1
2
3
4
5
6
你还可以提取颜色信息:

hue(@color); // returns the hue channel of @color
saturation(@color); // returns the saturation channel of @color
lightness(@color); // returns the 'lightness' channel of @color
1
2
3
如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:

@new: hsl(hue(@old), 45%, 90%);
1
@new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度.