变量

和sass不同，less的变量前缀是符号“@”

@arguments变量

@arguments包含了所有传递进来的参数。

.border_arg(@w:30px,@c:red,@xx:solid){
  border:@arguments;  //border:30px red solid;
}

混合

一个元素引用另一个元素的样式

1、混合变量

例如：.border{ border:solid 10px red; }

如果.div也想用这个样式直接写：

.div{
  .border
}

可带参数

2.变量没带值：

.border-radius(@radius){ css代码 }

.border_02(@border_width){
  border:solid yellow @border_width;
}
.test_hunhe{
  .border_02(30px);
}

3.变量带(默认)值

.border-radius(@radius:5px){css代码}

.border_03(@border_width:10px){
  border:solid green @border_width;
}
.test_hunhe_03{
  .border_03();
}

另外，虽然.border-02 和.border-03里面的变量都叫@border-width 但它们不冲突

匹配模式

举个例子：

.flo(l){
    float:left;
}
.flo(r){
    float:right;
}
.class1{
    width:100px;
    height:100px;
    .flo(l);
}  //这样就设置了这个class1类左浮动
.class2{
    width:100px;
    height:100px;
    .flo(r);
}  //这样就设置了这个class2类右浮动

函数

参考：http://less.bootcss.com/functions/#functions-overview

嵌套

&代表上一级。less嵌套最好不要超过三层

假如我们需要设置hover：

a{...}
a:hover{...}
可以改写为：
a{
    ...
    &:hover{...}
}

避免编译、!important

有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法。

要输出这样的值我们可以在字符串前加上一个 ~

例如：

width:~'calc(100%-35)';
height:~'calc(300px-20px)';

编译后(.css文件):

width: calc(100%-35);
height: calc(300px-20px);

!important：优先级提升，和css的使用一致