less

注释

//less
/* css*/
在less文件两种注释方式都可以，css注释在编译后的css文件仍然存在，less注释不存在

变量

@mainColor:red;
header{
  background-color:@mainColor;
}

@imhutl:"http://www.baidu.com/img/";
header{
  background:url("@(imgurl)bdlogo.png")
}

延迟加载

header{
  background-color:@mainColor;
}
@mainColor:red;

这样也可以

变量名相同，就近原则

混合

普通混合

.h{
background-color:red;
}
h1{
  .h
  color:blue;
}
h2{
.h
color:yellow;
}

编译生成

.h{
background-color:red;
}
h1{
  background-color:red;
  color:blue;
}
h2{
background-color:red;
color:yellow;
}

不带输出混合

.h(){
background-color:red;
}
h1{
  .h
  color:blue;
}
h2{
.h
color:yellow;
}

编译生成

h1{
  background-color:red;
  color:blue;
}
h2{
background-color:red;
color:yellow;
}

带选择器的混合

.h{
&:hover{
  color:red
}
}
h1{
.h()
}

h1:hover{
color:red
}

带参数的混合

.h(@color){
color:@color
}
h1{
  .h(red)
}

带参数并且有默认值

.h(@color:yellow){
color:@color
}
h1{
  .h(red)
}

带多个参数的混合

可以使用分号或逗号，推荐分号

• css逗号是列表
• 有分号出现，以分号为分隔符，全是逗号，才用逗号作为分隔符

命名参数

.h(@color:yellow;@margin:20px){
color:@color;
margin:@margin;
}
h1{
  .h(@margin:10px;@color:red)
}

arguments

代表所有的参数

.border(@x:1px;@y:solid;@z:#ccc){
  border:arguments;
}
h1{
  .border();
}

匹配模式

.border(all,@r:4px;){
  border-radius:@r;
}
.border(l_b,@r:4px){
  border-bottom-left:@r;
}
.btn{
  border(all,6px)
}

编译后

.btn{
  border-radius:6px;
}

返回值

.average(@x,@y){
  @average((@x+@y)/2)
}
h1{
  .average(2px,6px);
  padding:@average
}