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"