Less颜色值运算函数（13）

颜色值运算函数

注意事项：颜色值运算的时候要保证单位是相同的，计算时候百分比会通过绝对值来处理，参数必须在限定的范围内，不能超过界限（比如饱和度值最大是100%，那么计算时候最大值就不能超过100%）。返回值会自动转换成十六进制的颜色值

saturate()函数

作用：增加一定数值的颜色饱和度
例子：
Less中编写

div{
	background:hsl(90,80%,50%);
	background:saturate(hsl(90,80%,50%),20%);
}

编译后的结果

div{
	background:#80e619;
	background:#80ff00;
}

desaturate()函数

作用：降低一定数值的颜色饱和度

lighten()函数

作用：增加一定数值的颜色亮度
例子：
Less中编写

div{
	background:hsl(90,80%,50%);
	background:lighten(hsl(90,80%,50%),20%);
}

编译后的结果

div{
	background:#80e619;
	background:#b3f075;
}

darken()函数

作用：降低一定数值的颜色亮度

fadein()函数

作用：降低颜色的透明度（或增加不透明度），令其更加不透明
例子：
Less中编写

div{
	background:hsla(90,80%,50%,50%);
	background:fadein(hsla(90,80%,50%,50%),10%);
}

编译后的结果

div{
	background:rgba(128,230,25,0.5);
	background:rgba(128,230,25,0.6);
}

fadeout()函数

作用：增加颜色的透明度（或降低不透明度），令其更加透明

fade()函数

作用：给颜色（包括不透明的颜色）设置一定数值的透明度
例子：
Less中编写

div{
	background:fade(hsl(90,80%,50%),40%);
}

编译后的结果

div{
	background:rgba(128,230,25,0.4);
}

spin()函数

作用：任意方向旋转颜色的色相角度（hue angle）
例子：
Less中编写

div{
	background:hsl(10,90%,50%);
	background:spin(hsl(10,90%,50%),30);
}

编译后的结果

div{
	background:#FF420A;#f2330d
	background:#FBA407;#f20d0d
}

mix()函数

作用：根据比例混合两种颜色，包括计算不透明度
例子：
Less中编写

div{
	background:rgba(100,50,20,0.5);
	background:rgba(0,150,120,0.2);
	background:mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}

编译后的结果

div{
	background:rgba(100,50,20,0.5);
	background:rgba(0,150,120,0.2);
	background:rgba(65,85,55,0.35);
}

greyscale()函数

作用：完全移除颜色的饱和度，与desaturate（@color,100%）函数效果相同

contrast()函数

作用：选择两种颜色相比较，得出哪种颜色的对比度最大就倾向于对比度最大的颜色
例子：
Less中编写

div{
	// 这里的最后一个值60%，是一个可选参数，范围0%~100%，表示颜色百分比的定界值
	background:contrast(hsl(90,100%,50%),#000000,#ffffff,60%); // 100%的时候偏向白色
}

编译后的结果