LESS详解之函数(三)

　　LESS自带有很多的函数，之前已经为大家介绍过两次有关LESS函数的小知识了，相比大家应该对之前介绍的有所了解了。下面依旧为大家介绍LESS的函数，附加着一些小例子。

　　mod(number, number)取余

　　返回第一个参数对第二参数取余的结果。返回值与第一个参数单位相同，第二个参数单位被忽略。这个函数也可以处理负数和浮点数。参数：数字，浮点数;数字，浮点数。返回值：数字，取余的结果。

　　LESS代码

div {
	width:mod(0cm, 0px);
	height:mod(11cm, 6px);
	padding:mod(-26%, -5);
}

　　编译后的CSS代码

div {
  width: NaNcm;
  height: 5cm;
  padding: -1%;
}

　　convert(number, units)在数字之间转换

　　将数字从一种类型转换到另一种类型。第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。

　　兼容的单位组——长度：m / cm / mm / in / pt / pc；时间：s / ms；角度：rad / deg / grad / turn

　　grad为“百分度”，见正弦函数下的说明。turn为“圈/周”的意思，1turn为360度。

　　参数：数字，带单位的数值，浮点数；单位。

　　返回值：转换单位后的数值

　　LESS代码

div {
	width:convert(9s, "ms");
	height:convert(14cm, mm);
	/*不兼容的单位*/
	padding:convert(8, mm);
}

　　编译后的CSS代码

div {
  width: 9000ms;
  height: 140mm;
  /*不兼容的单位*/
  padding: 8;
}

　　rgb(@r, @g, @b)转换为颜色值

　　通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色。

　　参数：

　　@red: 整数 0-255 或百分比 0-100%

　　@green: 整数 0-255 或百分比 0-100%

　　@blue: 整数 0-255 或百分比 0-100%

　　返回值：颜色 (color)

　　LESS代码

div {
	color:rgb(90, 129, 32);
}

　　编译后的CSS代码

div {
  color: #5a8120;
}

　　rgba(@r, @g, @b, @a)转换为颜色值

　　通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。

　　参数：

　　@red: 整数 0-255 或百分比 0-100%

　　@green: 整数 0-255 或百分比 0-100%

　　@blue: 整数 0-255 或百分比 0-100%

　　@alpha: 数字 0-1 或百分比 0-100%

　　返回值：颜色 (color)

　　LESS代码

div {
	color:rgba(90, 129, 32, 0.5);
}

　　编译后的CSS代码

div {
  color: rgba(90, 129, 32, 0.5);
}

　　argb(@color)创建 #AARRGGBB 格式的颜色值

　　创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。这种格式被用在IE滤镜中，以及.NET和Android开发中。参数：@color: 颜色对象 (A color object.)

　　返回值：字符串 (string)

　　LESS代码

div {
    color:argb(rgba(90, 23, 148, 0.5));
}
span {
    color:argb(#555);
}

　　编译后的CSS代码

div {
  color: #805a1794;
}
span {
  color: #ff555555;
}

　　hsl(@hue, @saturation, @lightness)创建颜色值

　　通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

　　参数：

　　@hue: 整数 0-360 表示度数。

　　@saturation: 百分比 0-100% 或数字 0-1

　　@lightness: 百分比 0-100% 或数字 0-1

　　返回值：颜色 (color)

　　LESS代码

div {
	color:hsl(90, 100%, 50%);
}

　　编译后的CSS代码

div {
  color: #80ff00;
}

　　hsla(@hue, @saturation, @lightness, @alpha)创建颜色值

　　通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象。

　　参数：

　　@hue: 整数 0-360 表示度数

　　@saturation: 百分比 0-100% 或数字 0-1

　　@lightness: 百分比 0-100% 或数字 0-1

　　@alpha: 百分比 0-100% 或数字 0-1

　　返回值：颜色 (color)

　　LESS代码

div {
	color:hsl(90, 100%, 50%, 0.5);
}

　　编译后的CSS代码

div {
  color: #80ff00;
}

　　hsv(@hue, @saturation, @value)创建颜色值

　　通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV) 创建不透明的颜色对象。注意与 HSL 不同，这是另一种在Photoshop中可用的色彩空间。

　　参数:

　　@hue: 整数 0-360 表示度数

　　@saturation: 百分比 0-100% 或数字 0-1

　　@value: 百分比 0-100% 或数字 0-1

　　返回值：颜色 (color)

　　LESS代码

div {
	color:hsv(90, 100%, 50%);
}

　　编译后的CSS代码

div {
  color: #408000;
}

　　hsva(@hue, @saturation, @value, @alpha); // 创建颜色值

　　通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。注意与 HSLA 不同，这是另一种在Photoshop中可用的色彩空间。

　　参数:

　　@hue: 整数 0-360 表示度数

　　@saturation: 百分比 0-100% 或数字 0-1

　　@value: 百分比 0-100% 或数字 0-1

　　@alpha: 百分比 0-100% 或数字 0-1

　　返回值：颜色 (color)

　　LESS代码

div {
	color:hsva(90, 100%, 50%, 0.5);
}

　　编译后的CSS代码

div {
  color: rgba(64, 128, 0, 0.5);
}

　　hue(@color); // 从颜色值中提取 hue 值(色相)

　　从颜色对象中提取色相值。

　　参数：

　　@color: 颜色对象 (A color object.)

　　返回值：整数，范围从0-360

　　LESS代码

div {
	color:hue(hsl(90, 100%, 50%));
}

　　编译后的CSS代码

div {
  color: 90;
}

　　LESS详解之函数(三)就为大家介绍到这里了，这只是LESS函数中的一小部分。后面的几天将为大家一波儿接着一波儿的介绍LESS详解之函数。希望这一波儿一波儿的介绍LESS详解之函数能为大家有所帮助。