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