less的一些特性

1.变量声明

@color:#DA3B00FF;
.button{
	color:@color //使用
}
.button{
	color:#DA3B00FF //编译结果css
}
//作用域
less就近原则使用最近的定义若是全局和局部都定义同一个变量则就近使用局部

2.mixins混入

.font{
	font-size: 14px;
}
.button{
	.font;  //使用
}
.button{
	font-size: 14px;//编译结果css
}

3.函数模式

.font(@font){ 
	font-size:@font
}
.button{
	.font(14px) //使用
}
.button{
	font-size: 14px;//编译结果css
}
//参数默认值
.font(@font:14px){  //参数默认值
	font-size:@font
}
.hw(@h:100px,@w:@h){//参数默认值
	height:@h;
	width:@w;
}
.button{
	.font; //使用
	.hw(200px);
}
.button{
	font-size: 14px;//编译结果css
	height:200px;
	width:200px;
}
//不定参
.margin(...){  //不定参
	margin:@arguments;
}
.button{
	.margin(20px); //使用
}
p{
	.margin(20px,20px); //使用
}
.button{
	margin: 20px;//编译结果css
}
p{
	margin:20px 20px; //编译结果css
}
//指定参数
.border(@thickness:1px,@type:solid,@color:red){
	border:@arguments;
}
.button{
	.border(@color:white) //使用只想更改color值
}
.button{
	border:1px solid white; //编译结果css
}

4.计算

.font(@font){ 
	font-size: @font/2; 
}
.button{
	.font(14px); //使用
}
.button{
	font-szie: 7px; //编译结果css
}

5.when条件判断

//条件判断
.color(@num) when (@num<= 20) and (@num>=10){ 
	color: red; 
}
.button{
	.color(10); //使用
}
.button{
	color: red;//编译结果css
}

6.loop循环

loop利用when进行递归循环。 
.loop-test(@n,@i:1) when (@i<=@n){ 
	.index-@{i}{ //可自定义@{name} 生成新的样式命名。
		width:@i*100/@n
	}
	.loop-test(@n,(@i+1))
}
.loop-test(4px); //使用
 //编译结果css
.index-1{
	width:25px
}
.index-2{
	width:50px
}
.index-3{
	width:75px
}
.index-4{
	width:100px
}

一些最近使用less的小结，以后会进行详细补充