Less注释

• • 第一种：不会被编译的注释，一般是给开发人员看的

• // 我是不会被编译的注释

• • 第二种：会被编译的注释，公开的或是给用户看的

• /* 
   * 我是会编译的注释
  */

Less变量

• ① 属性值变量，@声明变量，作为普通属性值使用

• @width: 50px;
  @height: 100px;
  
  div {
      width: @width;     // 50px
      height: @height;   // 100px
  }

• ② 属性名变量，也是用@声明变量，不过是作为属性名使用

• @prop: color;
  
  div {
      // 其实就是设置了div的color值和background-color值
      @{prop}: #000000;
      background-@{prop}: #000000;
  }

• ③ 选择器变量，也是用@声明，不过是作为选择器

• @taWrap: #wrap;
  
  @{taWrap} {
      margin: 5px;
  }

• ④ URL（相当于"../img/white-sand.png"）

• @images: "../img";
  
  body {
      background: url("@{images}/white-sand.png");
  }

• ⑤ 在import使用（和上面的有点像）

• @themes: "../../src/themes";
  
  @import "@{themes}/tidal-wave.less";

• ⑥ 可以使用另一个变量来定义变量的名称

• @primary:  green;
  @secondary: blue;
  @color: primary;
  
  .element {
      // 选择@color，color刚好定义为primary，@primary是green，所以输出green
      color: @@color;
  }

• • 编译后：

• .element {
      color: green;
  }

• ⑦ v3.0.0新增 $prop可以使用语法轻松地将属性视为变量

• .widget {
      color: #efefef;
      background-color: $color;     // 直接用了上面的color
  }

• • 编译后：

• .widget {
      color: #efefef;
      background-color: #efefef;
  }

  // 请注意，与变量一样，Less 将选择当前/父范围内的最后一个属性作为“最终”值
  .block {
      color: red; 
      .inner {
          background-color: $color; 
      }
      color: blue;  
  }

• • 编译后：

• .block {
      color: red; 
      color: blue;    // 2个color没关系，会取blue
  } 
  .block .inner {
      background-color: blue; 
  }

• • 注意版本要v3.0，不然会编译成：

• .block .inner {
      background-color: $color;
  }