Less的用法 / 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"