less 用法

变量：

1. 简单变量：
   1. 定义：
      @color:red;
   2. 使用：

       body{
           color:@color;
       }

2. 复杂变量：
   1. 定义：

       @mix:{
           color:red;
           background:blue;
       };  ←此处末尾有分号

   2. 使用：

       body{
           @mix();
       }

条件表达式：

1. 单独使用：

    @bool:true;
    & when(@bool=true){
        body{
            color:red;
        }
    }
    & when(@bool=false){
        body{
            color:yellow;
        }
    }

2. 用在类中：

    .class(@a) when (@a>5px){
        width:@a;
    }
    body{
        .class(6px);
    }

3. 常见判断函数：

   iscolor  // 是否是颜色值
   isnumber  // 是否是数值
   isstring  // 是否是字符串
   iskeyword  // 是否是关键词
   isurl  // 是否是url地址
   --
   @isnumber下：
   ispixel  // 是否是像素
   ispercentage  // 是否是百分比
   isem  // 是否是em
   isunit  // 是否是单位

递归调用：

1. 代码：

    .class(@num) when (@num > 0) {
        .class((@num - 1));
        width: (10px * @num);
    }
    div {
        .class(5);
    }

2. 输出：

    div {
        width: 10px;
        width: 20px;
        width: 30px;
        width: 40px;
        width: 50px;
    }

面向对象：

1. 封装：
   1. 代码：

       .class(){
           @color:red;  // 定义内部变量
           color:@color;  // 使用变量
       }
       body{
           .class();  // 使用类
       }

   2. 输出：

       body {
           color: red;
       }

2. 继承：
   1. 代码：

       .class(){
           @color:red;
           color:@color;
       }
       body{
           .class();
           background: blue;
       }

   2. 输出：

       body {
           color: red;
           background: blue;
       }

3. 重载：
   1. 使用一个参数：
      1. 代码：

          .class(@color){
              color:@color;
          }
          .class(@color;@background){
              color:@color;
              background: @background;
          }
          body{
              .class(red);
          }

      2. 输出：

          body {
              color: red;
          }

   2. 使用多个参数：
      1. 代码：

          .class(@color){
              color:@color;
          }
          .class(@color;@background){
              color:@color;
              background: @background;
          }
          body{
              .class(red,blue);
          }

      2. 输出：

          body {
              color: red;
              background: blue;
          }

   3. 默认参数：
      1. 代码：

          .class(@color:red){
              color:@color;
          }
          body{
              .class();
          }

      2. 输出：

          body {
              color: red;
          }

   4. 命名空间：
      1. 代码：

          .namespace(){
              .class(){
                  color:red;
                  background: blue;
              }
          }
          body{
              .namespace();
              .class();
          }

      2. 输出：

          body {
              color: red;
              background: blue;
          }

插件：

1. test.js：

    module.exports = {
        install: function(less, pluginManager, functions) {
            functions.add('pi', function(val) {
                return less.dimension(Math.PI);
            });
        }
    };

2. test.less：

    @plugin "test.js";
    body{
        width:pi() * 2;
    }

3. 输出：

    body {
        width: 6.28318531;
    }

导入：

@import  "test";
==
@import  "test.less";