LESS详解之函数(四)
之前已经为大家介绍了一些LESS函数，大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS的函数，附加着一些小例子。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。
saturation从颜色值中提取饱和度(@color)
从颜色对象中提取饱和度值。参数：@color: 颜色对象 (A color object.)。返回值：百分比值 0-100。
LESS代码
div {
width:saturation(hsl(90, 100%, 50%));
}
编译后的CSS代码
div {
width: 100%;
}
lightness从颜色值中提取亮度(@color)
从颜色对象中提取亮度值。参数：@color: 颜色对象 (A color object.)。返回值：百分比值 0-100
LESS代码
div {
width:lightness(hsl(90, 100%, 50%));
}
编译后的CSS代码
div {
width: 50%;
}
hsvhue从颜色中提取色相(@color)
以HSV色彩空间提取颜色中的色相值。参数：颜色。返回：整数，范围为0-360
LESS代码
div {
width:hsvhue(hsv(90, 100%, 50%));
}
编译后的CSS代码
div {
width: 90;
}
hsvsaturation以HSV色彩空间提取颜色中的饱和度值(@color)
从颜色中提取 saturation 值，以HSV色彩空间表示(饱和度)。参数：颜色。返回值：百分比，范围0-100
LESS代码
div {
width:hsvsaturation(hsv(90, 100%, 50%));
}
编译后的CSS代码
div {
width: 100%;
}
hsvvalue以HSV色彩空间提取颜色中的色调值(@color)
从颜色中提取 value 值，以HSV色彩空间表示(色调)。参数：颜色。返回：百分比，范围为0-100
LESS代码
div {
width:hsvvalue(hsv(90, 100%, 50%));
}
编译后的CSS代码
div {
width: 50%;
}
red从颜色对象中提取红色值(@color)
从颜色值中提取 'red' 值(红色)。参数：@color: 颜色对象 (A color object.)。返回值：整数 0-255
LESS代码
div {
width:red(rgb(10, 20, 30));
}
编译后的CSS代码
div {
width: 10;
}
green从颜色对象中提取绿色值(@color)
从颜色值中提取 'green' 值(绿色)。参数：@color: 颜色对象 (A color object.)。返回值：整数 0-255
LESS代码
div {
width:green(rgb(10, 20, 30));
}
编译后的CSS代码
div {
width: 20;
}
blue从颜色对象中提取蓝色值(@color)
从颜色值中提取 'blue' 值(蓝色)。参数：@color: 颜色对象 (A color object.)。返回值：整数 0-255
LESS代码
div {
width:blue(rgb(10, 20, 30));
}
编译后的CSS代码
div {
width: 30;
}
alpha从颜色对象中提取 alpha 值(@color)
从颜色值中提取 'alpha' 值(透明度)。参数：@color: 颜色对象 (A color object.)。返回值：浮点数，介于 0-1 之间
LESS代码
div {
width:alpha(rgba(10, 20, 30, 0.5));
}
编译后的CSS代码
div {
width: 0.5;
}
luma从颜色值中提取亮度的百分比(@color)
计算颜色对象的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast() 函数中。参数：@color: 颜色对象 (A color object.)。返回值：百分比 0-100%
LESS代码
div {
width:luma(rgb(100, 200, 30));
}
编译后的CSS代码
div {
width: 65%;
}
LESS详解之函数(四)就为大家介绍到这里了，这只是LESS函数中的一小部分。后面的几天将为大家一波儿接着一波儿的介绍LESS详解之函数。希望这一波儿一波儿的介绍LESS详解之函数能为大家有所帮助。