less变量的延迟加载

less变量的延迟加载

• less中的加载是有延迟的
• 它会在当前作用域样式未加载之前先加载变量，而且是由内而外，先寻找作用域内的变量，如果没有在寻找作用域外的变量

代码说明

less样式

@var:yellow;
.test{
  background: @var;

  .test2{
    @var:blue;
    color: @var;
    @var:pink;
  }
  @var:red;
}

css样式

.test {
  background: #ff0000; //red
}
.test .test2 {
  color: #ffc0cb;     //pink
}

由内到外寻找变量

• 如下面代码.test2外层是.test所以继承red样式

less

@var:yellow;
.test{
  background: @var;
  .test2{
    color: @var;
  }
  @var:red;
}

css

.test {
  background: #ff0000;   //red
}
.test .test2 {
  color: #ff0000;       //red
}

先加载变量再赋值

• less机制是先加载完声明变量再赋值到样式中去。在如下面代码@var中的变量值顺序yellow 到blue再到pink，由于变量被覆盖最终变量值为pink
  less

@var:yellow;
  .test2{
    @var:blue;
    color: @var;
    @var:pink;
  }

css

.test2 {
  color: #ffc0cb;  //pink
}