LESS语法

#Less中的注释
// less转css时不会保留
/**/ 原本css的样式，less转css时会保留
#Less中的变量

@test_width:300px;
.class{
	width:@test_width;
}

#混合

.class1{
	height:300px;
	.class2;
}
.class2{
	width:300px;
}

#混合-可带变量

.border1(@test_width){
	border:solid red @test_width;
}
.border2{
	.border1(50px);
}

#混合_带默认值

.border3(@test_width:10px){
	border:solid red @test_width;
}
.border4{
	.border1();		//默认是10px
}
.border5{
	.border1(30px);	//更改为30px
}

#混合使得兼容更加方便

.test_radius1(@radius:5px){
	-webkit-test_radius1:@radius;
	-moz-test_radius1:@radius;
}
.test_radius2(){
	.test_radius1();
}

#匹配模式
//三角形 ∧

.triangle(bottom,@color:#ccc,@width:5px;){
	border-width:@width;
	border-color:transparent transparent @color transparent;
	boeder-style:dashed dashed solid dashed;
}

//三角形 ∨

.triangle(top,@color:#ccc,@width:5px;){
	border-width:@width;
	border-color:@color transparent transparent transparent;
	boeder-style:solid dashed dashed dashed;
}

//三角形 ＞

.triangle(left,@color:#ccc,@width:5px;){
	border-width:@width;
	border-color:transparent transparent transparent @color;
	boeder-style:dashed dashed dashed solid;
}

//三角形 ＜

.triangle(right,@color:#ccc,@width:5px;){
	border-width:@width;
	border-color:transparent @color transparent transparent;
	boeder-style:dashed solid dashed dashed;
}

//不管与以上四个哪个匹配成功，或者没有匹配成功，都会在末尾加上height;300px;
.triangle(@_,@color:#ccc,@width:5px;){
	height：300px；
}

//画一个三角型
.test-01{
	.triangle(top);
}

#匹配模式-定位例子

.pos(a){	position:absolute;	}
.pos(r){	position:relative;	}
.pos(f){	position:fixed;	}
.text-02{
	width:200px;
	height:200px;
	.pos(a);
}

#运算

@width-01:200px;
.text-03{
	width:@width-01+200;
}

#嵌套规则

.class01{
.class02{}
	p{}
}

即

.class01{}
.class01 .class02{}
.class01 p{}

&表示上一层选择器，这里表示的是a

a{
	&:hover{}
}

即

a{}
a:hover{}

#@arguments变量
包含所有传递进来的参数

.border01(@w:200px,@c:#ccc,@xx:solid){
border:@arguments;	//即border:@w @c @xx;
}

#避免编译

.test{
width:calc(300px-30px);
}

在less中会自动编译成

.test{
width:calc（270px);
}

但当我们不需要less帮我们自动编译时，我们可以这样写：

.test{
width:~’calc(300px-30px)’;
}

#！important

.class{
height:30px;
width:30px;
}
.test{
.class !important;
}

即

.class{
height:30px !important;
width:30px !important;
}