HSL LESS函数不返回颜色,而是返回名称指示的颜色部分的整数值.
hue(@color); // returns the `hue` channel of @color in the HSL space
例子
.foo{
color: hue(#167e8a);
}
// rendered as
.foo {
// invalid...hence you don't see a color
color: 186;
}
在进一步说明之前,值得一提的是spin() function将修改色调而不要求你分解颜色部分.具体来说,它将“在任一方向上旋转颜色的色调角度”.
即使您希望手动分解HSL,也很简单.
@h: hue(#167e8a);
@s: saturation(#167e8a);
@l: lightness(#167e8a);
.foo{
color: hsl(@h,@s,@l);
}
// rendered as
.foo {
color: #167d88;
}
更重要的是,您可以获取提取的通道,修改它们,然后重建颜色:
@h: hue(#167e8a) + 40;
@s: saturation(#167e8a) - 5;
@l: lightness(#167e8a) + 30;
.foo{
color: hsl(@h,@s,@l);
}
// rendered as
.foo {
color: #5978de;
}