LESS 中的导入文件规则需要注意哪些细节？-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预编译器，它扩展了 CSS，并且最终编译为一组普通的 CSS 样式表。在 LESS 中，可以通过导入文件的方式，将多个 LESS 文件合并为一个文件输出，简化开发过程。但是，在进行导入文件时，需要注意一些细节，本文将详细说明。

文件路径

当 LESS 文件中需要导入其他文件时，文件路径即为导入的文件相对于当前文件的位置，可以使用相对路径或绝对路径。相对路径的写法基于当前文件，例如：

@import "variables.less";

这将会导入与当前文件在同级目录下的 variables.less 文件。而在导入相对路径文件时，无需在路径前添加 ./，这会增加写作负担，不便于维护。

另外，相对路径可包含指向父目录的 .. 符号，例如：

@import "../base/variables.less";

这将会导入与当前文件在上级目录的 base/variables.less 文件。

文件后缀

LESS 文件支持导入其他 LESS 文件，同时也支持导入 CSS 文件。但是在导入文件时需要注意文件的后缀名。

如果导入的文件是 LESS 文件，则后缀名可以省略，即以下两种写法是等效的：

@import "variables.less";
@import "variables";

但是如果导入的文件是 CSS 文件，则需要明确指定文件后缀名，即：

@import "reset.css";

导入顺序

在 LESS 中，导入文件的顺序也需要谨慎考虑。由于 LESS 能够通过变量、混合器等方式在多个文件间共享样式，因此不同文件的导入顺序可能会影响最终的编译结果。

通常情况下，可以根据以下准则导入文件：

全局设置和全局引入的文件应放在首位。
其他样式文件应按照功能和公共性导入。

例如，variables.less 是一个全局变量文件，reset.less 是对全局样式进行重置的文件，那么可以按照以下顺序导入：

@import "variables.less";
@import "reset.less";
@import "home.less";
@import "product.less";

从上面的导入顺序可以看出，全局变量和样式重置先于其他样式文件导入。

循环依赖

在 LESS 中，导入文件还存在一种问题，即文件的循环依赖。当两个或多个文件相互依赖时，可能会导致编译失败，或者导致样式渲染错误。

为了避免循环依赖的问题，应该尽量避免跨文件使用变量和混合器，同时，将通用的样式代码抽取到专门的文件中，避免文件间嵌套太深。

总结

导入文件是 LESS 开发中常用的手段，但是在使用时需要注意文件路径、文件后缀、导入顺序以及循环依赖等问题。只有我们正确地使用导入文件，才能大大提高代码重用性和便于维护。

示例代码：

// javascriptcn.com 代码示例
// variables.less
@primary-color: #007bff;
@secondary-color: #6c757d;

// reset.less
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// home.less
@import "variables.less";

body {
  background-color: @primary-color;
}

// product.less
@import "variables.less";

.product {
  color: @secondary-color;
}

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65431f097d4982a6ebcc75bd