Less函数（9）

函数（functions）

介绍：Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数，这些函数使用起来非常简单。

函数的类型大致分为：其他函数（后面属于8种类型以外的函数）、字符串函数、长度相关函数、数学函数、类型函数、颜色值定义函数、颜色值通道提取函数、颜色值运算函数、颜色混合函数

实例1：
最常见的 rgb() 函数，将 rgb 模式的值转换为16进制的值

less写法：

.bgcolor{
	background:rgb(0,133,0);
}

编译结果：

.bgcolor{
	background:#008500;
}

实例2：
提取蓝色值的 blue() 函数

less写法：

.bgcolor{
	background:blue(#ffffff);
}

编译结果：

.bgcolor{
	background:255;
}

其他函数

color()函数

作用：解析颜色，将代表颜色的字符串转换为颜色值
例子：
Less编写

body{
	background:color("#f60");
}

编译结果

body{
	background:#ff6600;
}

convert()函数

作用：将数字从一种类型转换到另一种类型
长度单位：m,cm,mm,in,pt,px,pc
时间单位：s,ms
角度单位：rad(弧度)，deg(度)，grad(梯度)，turn(圆)

例子：
Less编写

body{
	width:convert(20cm,px);
}

编译结果

body{
	width:755.90551181px;
}

data-uri()函数

作用：将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会在使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。

例子：
Less编写

body{
	/* 变成base64的模式 */
	background:data-uri('arr.jpg');
}

编译结果

body{
	background:url(data:image/jpeg;base64,/9j/.......);
}

default()函数

只能边界条件中使用，没有匹配到其他自定义函数（mixin）的时候返回true，否则返回false

例子：
Less编写

.x(1){ x:11 }
.x(2){ y:22 }
/* 当上面两条都匹配不到的时候就会执行下面这条 */
.x(@a) when (default()){ z:@x }

.div1{
	.x(1);
}
.div2{
	.x(123);
}

编译结果

.div1{
	x:11;
}
.div2{
	x:123;
}

例子2：
Less编写

.x(@x) when (ispixel(@x)){ width:@x }

/* 在至少除了自身一条数据以外的自定义函数满足时候才触发 */
.x(@x) when not (default()){ padding:(@x/10) }

.div1{
	.x(100px);
}
.div2{
	.x(100cm);
}

编译结果

.div1{
	width:100px;
	padding:10px;
}

unit()函数

移除或者改变属性值的单位
例子：
Less编写

div{
	width:unit(100px,cm);
	height:unit(100,px);
	padding:unit(20px);
}

编译结果

div{
	width:100cm;
	height:100px;
	padding:20;
}