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