1. 变量:
    1. 简单变量:
      1. 定义:
        @color:red;
      2. 使用:
        body{
        color:@color;
        }
    2. 复杂变量:
      1. 定义:
        @mix:{
        color:red;
        background:blue;
        };  ←此处末尾有分号
      2. 使用:
        body{
        @mix();
        }
  2. 条件表达式:
    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  // 是否是单位
  3. 递归调用:
    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;
      }
  4. 面向对象:
    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;
          }
  5. 插件:
    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;
      }
  6. 导入:
    @import  "test";
    ==
    @import  "test.less";
文档更新时间: 2020-11-22 20:37   作者:lee