less中部分语法详解

less中的语法详解，主要是介绍一些平时常用的语法。

一、变量。

　　变量是识别符号是@，在less中以@开头的则是变量，关于变量名的命名方法，大家可以参考js中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……，当然也是可是使用香肠命名法用下划线“_”来命名。如，box_main,border_bottom,……。

二、混合。

这个模式比较常见，例如：规定的主背景色，主文字颜色等，可以事先定义好相关的颜色。在使用的时候直接调用，例如。　

　　.border_radius(@radius:5px){
　　　　border-radius: @radius;
　　　　-webkit-border-radius:@radius;
　　}
　　.box_02{
　　　　margin-left: 50%;
　　　　width: 200px;
　　　　height:60px;
　　　　.border_radius();
　　　　background:#ccc;
　　}

这样方便与后期维护。

三、匹配模式

　　匹配模式有助于我们更好的节省代码和唤起记忆。@_:定义公共部分
例： 定义不同方向的三角形

　.troangle(@_,@border_width,@border_color){
    width: 0;
    height: 0;
    border:@border_width solid transparent;
}
.troangle(up,@border_width,@border_color){
    border-top: @border_width solid @border_color;
}

.troangle(down,@border_width,@border_color){
    border-bottom: @border_width solid @border_color;
}

.troangle(left,@border_width,@border_color){
    border-right: @border_width solid @border_color;
}

.troangle(right,@border_width,@border_color){
    border-left: @border_width solid @border_color;
}

.div1{
    .troangle(up,6px,red);
}
.div2{
    .troangle(down,6px,blue);
}
.div3{
    .troangle(left,6px,green);
}
.div4{
    .troangle(right,6px,yellow);
}

四、运算

在less中的运算是默认使用有单位的一方为基础单位运算，

   @w= 100px;

　　.bar_002{
　　　　width:@w - 30;
　　　　height:20px;
　　　　margin:0 auto;
　　　　background:#cdecde;
　　}

此时采用的计算单位就是px为其默认的计算单位。
在less中有一点和css3中不一样的地方就是采用百分比的单位不能和其他单位混合使用，例：

　　.bar_002{
　　　　width:100% - 30px;
　　　　height:20px;
　　　　margin:0 auto;
　　　　background:#cdecde;
　　}

　　在上面的计算中编辑的时候就会报错，不能这样使用，推荐使用的方法是采用css原生的使用方法来使用。

　　.bar_002{
　　　　width:~“calc(100% - 30px)”;
　　　　height:20px;
　　　　margin:0 auto;
　　　　background:#cdecde;
　　}

  使用“~”符号来告诉less引号里面的内容不需要编译。

五、嵌套规则

嵌套规则其实和css中的层级选择器一样，没有太多区别（层级最好控制在3层以内，这样有助于浏览器的识别）。
另外还有个符号不得不说的就是“&”，此符号与相对路径中使用的“./”具有相同的意义，是返回上一次的意思，这个对使用为元素：hover，：avtice等有着很好的选择效果。

六、@arguments变量

当我们给变量设置很多默认值，这个时候我们又不想修改，想直接应用，那么arguments无疑是便捷的方式，使用此参数，可以直接全部使用默认变量。

  例：

　　.bar_004(@w: 100%,@xx: solid,@c: #ccc){
　　border:@arguments;
　　}

七、使用important来提升优先级。

在我们使用important，不仅可以使用给变量也可以使用给一个类。用此来提升优先级来达到我们想要的效果。