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详解之函数能为大家有所帮助。