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


posted on 2013-11-14 21:24  新一  阅读(2562)  评论(0编辑  收藏  举报

导航