Less的导入（@import）

https://lesscss.org/features/#import-atrules-feature

从其它样式表中导入样式。

在标准的CSS中，@import规则必须放在所有其它类型的规则之前。但是Less并不关心你将@import语句放在哪里。

例如：

或者：

文件扩展名

@import语句可能会根据文件扩展名被Less以不同的方式处理：

• 如果文件扩展名为.css，它将被视为CSS，@import语句将保持原样。
• 如果它有其他任何扩展名，它将被视为Less并被导入。
• 如果没有扩展名，将添加.less扩展名，并将其作为导入的Less文件包含。

例如：

@import "foo";      // foo.less 被导入
@import "foo.less"; // foo.less 被导入
@import "foo.php";  // foo.php 作为一个Less 文件被导入
@import "foo.css";  // 保留声明原样

使用@import "foo";

使用@import "foo.less";

使用@import "bar.css";

Import 选项

Less为CSS @import CSS规则提供了几个扩展，以便在处理外部文件时提供更多的灵活性。

语法：

@import (keyword) "filename";

以下导入选项已被实现：

• reference：使用Less文件但不输出它
• inline：将源文件包含在输出中但不做处理
• less：无论文件扩展名如何，都将其视为Less文件
• css：无论文件扩展名如何，都将其视为CSS文件
• once：只包含文件一次（这是默认行为）
• multiple：多次包含文件
• optional：当找不到文件时继续编译

每个@import语句允许使用多个关键字，你需要用逗号分隔这些关键字，例如：

@import (optional, reference) "foo.less";

reference

使用@import (reference)导入外部文件，但除非被引用，否则不会将导入的样式添加到编译输出中。例如：@import (reference) "foo.less";

此外，reference根据使用的方法（mixin或extend）产生不同的结果：

• extend：当一个选择器被扩展时，只有新的选择器被标记为未引用，并且它会被拉到reference @import语句的位置。
• mixins：当reference 样式作为隐式mixin使用时，它的规则被混合进来，标记为“未引用”，并像往常一样出现在引用的地方。

例如：

extend外部文件中的样式：

作为mixin引用：

inline

使用@import (inline)包含外部文件，但不处理它们。

当CSS文件可能与Less不兼容时，你将使用此方法；这是因为尽管Less支持大多数已知的标准CSS，但它不支持在某些地方的注释，也不支持所有已知的CSS hacks，除非修改CSS。

因此，你可以使用此方法将文件包含在输出中，以便所有CSS都位于一个文件中。

例如：

less

使用@import(less)将导入的文件视为less,无论文件扩展名如何。例如：

@import (less) "foo.css";

css

使用@import(css)将导入的文件视为普通css,无论文件扩展名如何。这意味着导入语句将保持原样。

例如：

once

@import语句的默认行为。这意味着文件只导入一次，对该文件的后续导入语句将被忽略。

例如：

multiple

使用@import(multiple)来允许导入多个具有相同名称的文件。这与once的行为相反。

例如：

optional

使用@import(optional)来仅在文件存在时导入。如果没有optional关键字，less在导入找不到的文件时会抛出fileerror并停止编译。

没有加optional，导入的文件不存在时报错：

加了optional，导入的文件不存在时不会报错：