Less - 导入选项

LESS - 导入选项

LESS 中的 @import at-rule 是将样式表组织成多个易于管理的文件基础。它允许你将其他 .less 或 .css 文件的内容包含到当前文件中。LESS 扩展了标准的 CSS @import，提供了几个强大的选项，用于控制文件的处理和包含方式。这些选项提供了对编译过程的精细控制。

默认情况下，如果导入的文件扩展名为 .less，它会被作为 LESS 文件处理。如果扩展名为 .css，它会被视为纯 CSS 并输出为标准的 CSS @import 语句（除非是 LESS 可以解析的本地文件）。其他扩展名通常被视为 LESS 文件。

导入选项写在 @import 关键字后面的括号中，文件路径之前：

`@import (keyword) "filename";`

可用的导入选项：

序号	导入选项与语法	描述与用例
1	reference @import (reference) "utilities.less"; 使用此选项导入 utilities.less 中的变量、mixin 和选择器，供当前文件使用，但 不会 输出 utilities.less 本身中的任何 CSS 规则。这非常适合创建 mixin 或变量定义库，这些库本身不产生输出。	如果 utilities.less 只包含 mixin 和变量，使用 (reference) 可确保除非实际使用了其中的 mixin/变量，否则它不会向输出添加任何 CSS。
2	inline @import (inline) "third-party.css"; 将指定文件的内容直接包含到你的输出 CSS 中，不做 任何 LESS 处理。这对于整合第三方 CSS 库或任何你不想让 LESS 解析或修改的纯 CSS 非常有用。	third-party.css 的内容将逐字复制到编译后的 CSS 中。
3	less @import (less) "styles.txt"; 强制 LESS 将导入的文件视为 LESS 文件，无论其实际扩展名（例如，.txt, .css）如何。LESS 将相应地解析和处理其内容。	如果 styles.txt 包含有效的 LESS 语法，它将作为你的样式表的一部分进行编译。
4	css @import (css) "theme.less"; 强制 LESS 将导入的文件视为标准 CSS 文件。如果是本地文件，其内容可能会被内联。如果是远程 URL，通常会在输出中生成一个标准的 CSS @import url(...) 语句。LESS 不会将其内容作为 LESS 语法处理。	如果使用 (css) 导入 theme.less，其 LESS 特有功能（如变量或 mixin）将不会被导入文件的上下文处理。
5	once @import (once) "_variables.less"; 这是 LESS 导入的默认行为。它确保一个文件只被导入和处理一次，即使在项目中有多个 @import 语句引用它。这可以防止重复的 CSS 输出和冗余的处理。	如果多次导入 _variables.less，(once)（或不使用选项）可确保其定义只被包含一次。
6	multiple @import (multiple) "mixins-with-params.less"; 允许同一文件被导入和处理多次。每个 @import (multiple) 语句将再次包含文件的内容。这在特定场景下非常有用，例如在不同的点使用不同的参数应用文件中定义的 mixin，或当一个文件生成的 CSS 需要重复时。	谨慎使用，如果管理不善，可能导致 CSS 文件体积臃肿。它通常用于文件根据导入之间变化的变量生成输出的情况。
7	optional @import (optional) "theme-customizations.less"; 如果指定要导入的文件未找到，此选项可防止编译错误。如果文件存在，它将照常导入；否则，@import 语句将被静默忽略，编译继续进行。	这对于可选的主题文件、用户特定的覆盖或项目中可能存在也可能不存在的特定功能样式非常有用。

组合多个选项：

你可以在括号内用逗号分隔来组合多个导入选项。顺序通常不重要。

示例：

@import (less, optional) "maybe-a-less-file.config";
// 这将尝试导入 'maybe-a-less-file.config'，将其视为 LESS 文件，
// 并在文件未找到时不会报错。

@import (reference, optional) "_local-settings.less";
// 这将仅导入 '_local-settings.less' 中的变量/mixin，
// 并在文件不存在时不会报错。

有效理解和利用这些导入选项是使用 LESS 构建模块化、易于维护和可扩展的 CSS 架构的关键。