less语法及使用介绍

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less中的注释

以//开头的注释，不会被编译到css文件中；

以/**/包裹的注释会被编译到css文件中。

less中的变量

使用@来声明一个变量，如：

@myColor：pink; 
@m: margin; 
@url:img/1.png;

注意：

• less中的变量是块级作用域生效！

• 在作为属性值使用时直接 background: @myColor 即可。

• 如果该变量是用作属性名，则加上大括号：@{m}:10px。

• 如果该变量作为url，也要加上大括号：background:url(@{url})。

• 在less中变量是延迟加载的，比如.demo{@var:1; two:@var; @var:2;}最终two的值为2，因为变量延迟加载，等到加载var时，下面的声明覆盖了上面的声明。

less中的嵌套规则

1. 基本嵌套规则

   .wrap{
       color:blue;
       .inner{
           color:red;
       }
       &:hover{
           color:pink;
       }
   }

   最终的效果是：

   .wrap{color:blue}
   .wrap .inner{color:red}
   .wrap:hover{color:pink}

2. &的使用

   如上面例子所示，&可以表示平级的选择器，不让其变成子级。

   ​
   ​

less中的混合(mixin)

混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

1. 普通混合，这样的混合less，编译后公共的部分依旧存在css中。

   .myStyle{
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
   }
   .inner1{
       .myStyle;
   }
   .inner2{
       .myStyle;
   }

2. 不带输出的混合，将变量转换成类似函数的方式，公共部分不会输出。

   .myStyle(){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
   }
   .inner1{
       .myStyle;
   }
   .inner2{
       .myStyle;
   }

3. 带参数的混合，可以进一步抽取出属性值，便于统一设置。

   .myStyle(@w,@h){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle(100px,100px);
   }
   .inner2{
       .myStyle(200px,200px);
   }

4. 带参数并且有默认值的混合，指定了默认值后可以不传参数。

   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle();
   }
   .inner2{
       .myStyle(200px,200px);
   }

5. 命名参数，可以传入指定的属性值。

   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle();
   }
   .inner2{
       .myStyle(@h:200px);
   }

6. 使用@import分离和引用，更好的提高复用性。

   //在my.less文件中定义好：
   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   
   //在其他less中引用：
   @import "./my.less";
   .inner{.myStyle()}

7. 匹配模式，可以解决一些比较复杂的复用需求。

   //比如画三角形：要能够传入参数，控制它的朝向，高，颜色。
   
   .triangle(@_,@w,@c){
       width:0px;
       height:0px;
   }
   .triangle(L,@w,@c){
       border-width:@w;
       border-color:transparent @c transparent transparent;
   }
   .triangle(R,@w,@c){
       border-width:@w;
       border-color:transparent transparent transparent @c;
   }
   .triangle(T,@w,@c){
       border-width:@w;
       border-color:transparent transparent @c transparent;
   }
   .triangle(B,@w,@c){
       border-width:@w;
       border-color:@c transparent transparent transparent;
   }
   
   //L/R/T/B是自己定义的标识符，在传入参数的时候可以指定匹配的mixin
   //如果有同名的mixin，且标识符参数是@_，那么不管匹配哪个都会将其也包括进去
   
   .demo{.triangle(R,40px,red)}

8. arguments变量，用的较少。

   .myStyle(@1,@2,@3){
       border:@arguments;
   }
   .demo{.myStyle(1px,solid,red)}

less运算

在less中可以进行加减乘除的运算，只需要一方带单位即可。

width:(100+100px)

less中避免编译

.myStyle{
    padding:~"calc(10px + 10px)";//这样less不会对引号中内容进行编译
}

//css中的结果：
.myStyle{
    padding: calc(10px + 10px); //因为浏览器本来就支持这种属性值
}

less继承

.myStyle{
    border: 1px solid red;
}
.myStyle.test{
    background:red;
}
.myStyle:hover{
    background:green;
}

//继承
#wrap{
    width:100px;
    height:100px;
    .inner{
        //加上all代表.myStyle的所有状态都继承
        &:extend(.myStyle all); 
        &:nth-child(1){}
        &:nth-child(2){}
    }
}

性能比混合高，可以将编译成的css文件中重复的样式进行合并。

但灵活度比混合低，不能传入参数。