Less(Lazy Loading)延迟加载

参考官网：http://less.bootcss.com/features/#variables-feature-lazy-loading

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

编译结果：

.lazy-eval-scope {
  width: 9%;
}

不难看出less的部分工作原理：优先加载变量（同一个作用域中），让后再加载样式

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

以上的这一段编译后的结果就是：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

不同作用域编译顺序不一样，从外到内

 

使用@import导入的less文件，同样可以重写其中的变量

// library.less
@base-color: green;
@dark-color: darken(@base-color, 10%);

----------------------------

// 导入library.less -----xxx.less
@import "library.less";
@base-color: red;

---------------------

其中@base-color会被从写，最终显示为：red