Less基础使用

声明变量

@a= 300px;
.border(@width){
	border:@width solid red;
}

使用变量

.box{
  	width:@a;
  	.border(20px);
}

样式计算

.box{
	width:300px;
	.tri{
		width:100% +30px;
	}
}

此处css解析结果为父级的130%，即390px,很显然这是错误的，我要的是330px;
解决：不由css计算结果，让浏览器计算。width:calc(100%+30px);//calc是css3的属性，如果要求兼容性，则width:~calc(100%+30px);//~表示避免被css编译
&运算符
嵌套写时，比如要选择hover,可以这么写

.box{
	width:300px;
	&:hover{
		width:100%;
	}
}