less常用

@charset "utf-8";
//变量
@awidth:200px;
body{
background-color:red;
}
.box{
width:@awidth;
.border;
}
//混合
.border{
height:200px;
}
//混合可带参数
.classone(@width){
width:@width;
}
.classtwo{
.classone(30px);
}
//混合默认参数
.class01(@height:10px){
height:@height;
}
.classtwo{
.class01;
}
//例子
.border_radius(@raduis){
-moz-border-radius:@raduis;
-webkit-border-radius:@raduis;
border-radius:@raduis;
}
.box{
.border_radius(20px);
}


//匹配模式
.a(a){
position: absolute;
}
.a(r){
position:relative;
}
.box{
.a(r);
}
//运算
@border:10px;
.borderone{
border:@border+20;
}
/*
嵌套
 */
ul{
background-colol: red;
margin:0px;
padding:0px;
li{
height: 30px;
line-height:30px;
// a{
// display:inline-block;
// }
}
a{ //尽量减少层级深度
display:inline-block;
&:hover{ //&代表外一层对象
color:red;
}
}
}
//arguments,获取所有参数
.border_args(@w:30px,@c:red,@s:solid){
border:@arguments;
}
.border{
.border_args();
}