Less的用法

Less常用来写样式，比较多的用法是使用第三方软件编译成CSS文件，然后在HTML页面引入CSS文件。而不是直接在HTML页面里引入编译文件和Less文件。如此以来，在后期修改方便的多。当然，在写小项目的时候可能会觉得写CSS比写Less方便的多。写LESS更多的是后期的维护和修改，它可以实现改一个地方多处修改的好处。

它可以在Node.js中使用，也可以在浏览器端使用，也就是客户端使用。

@charset编码：
@charset "utf-8"

Less的注释：
可以使用css中的注释（/**/）也可以使用//注释，但是使用//不会被编译。
/*该注释会被编译*/
//该注释不会被编译

变量。
@开头。
@bgColor : red;

混合：Mixin
混合变量：
.border{border:1px solid red;}
带参数的混合：
.border-radius(@radius){css代码}
可设置默认值
.border-radius(@radius:5px){css代码}
用法：
.test_hunhe{
  .border-radius(30px);
}

运算
任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号里。如+ - * /

匹配模式
相当于js中的if，但不完全是。
满足条件后才能匹配。
用法：（三角的写法）
.sanjiao{
  width:0;
  height:0;
  overflow:hidden;
 
  border-width:10px;
  border-color:transparent transparent red transparent;
  border-style:dashed dashed solid dashed;
}

//匹配模式
.triangle(top,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent @c transparent transparent;
  border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style:dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){  //@_代表始终带上这部分
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style:dashed dashed solid dashed;
}



嵌套规则。嵌套建议不大于3层。最多3层。
其中有两种用法：
&对伪类使用：hover或focus...
&对连接的使用：&-item
&代表上一层选择器。
用法：
.item{
  @w:130px;
  @h:130px;
  @img_h:40px;
 
  width:@w;
  height:@h;
 
  @_img{  //此处代表的是.item_img
    height:@img_h;
  }
}

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

!important关键字。
会为所有混合所带来的样式，添加上!important。优先级更高。

避免编译。
有时候需要输出一些不正确的语法或者使用一些Less不认识的专有语法。
可以在字符串前加上一个~
用法：width:~'calc(100%-35)'

@import引入文件。
如果引入的是Less文件，则可以不带后缀 @import "ku"
如果引入的不是Less文件，则需要带后缀。如：@import "a.css"
或者：@import (less) "a.css"