6.作用域和导入

作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在同级查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
其实也就是就近原则，越靠后写的就会生效。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // 这里上一级的@var是white，所以编译后就是white
  }
}

与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white; //即使写在后面，但也是最靠近的，所以生效
}

导入（@import）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉，当然你也可以导入 .css 文件，在less中使用 @import 导入其他文件：

@import "library"; // library.less
@import "typo.css";