文件扩展名

@import 取决于文件扩展名，Less可以对语句进行不同的处理：

• 如果文件具有.css扩展名，它将被视为CSS，并且该@import语句保持原样（请参见下面的内联选项）。
• 如果有其他扩展名，则将其视为Less并导入。
• 如果没有扩展名，.less将被附加，并将其作为导入的Less文件包含在内。

例子：

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a Less file
@import "foo.css";  // statement left in place, as-is

以下选项可用于替代此行为。

导入选项

Lessless提供了CSS @importCSS规则的几个扩展，以提供更多的灵活性来处理外部文件。

句法： @import (keyword) "filename";

已实现以下导入选项：

• reference：使用较少的文件，但不输出
• inline：在输出中包含源文件，但不对其进行处理
• less：无论文件扩展名是什么，都将其视为少文件
• css：无论文件扩展名为什么，都将其视为CSS文件
• once：仅包含一次文件（这是默认行为）
• multiple：多次包含文件
• optional：找不到文件时继续编译

每个关键字@import允许使用多个关键字，您必须使用逗号分隔关键字：

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

参考

使用@import (reference)导入外部文件，只是不添加导入样式编译后的输出，除非引用。

发布了v1.5.0

例： @import (reference) "foo.less";

想象一下，在导入的文件reference中用引用标记标记每个规则和选择器，并按常规进行导入，但是在生成CSS时，不会输出“引用”选择器（以及仅包含引用选择器的所有媒体查询）。reference除非将参考样式用作mixins或extended，否则样式不会在生成的CSS中显示。

此外，reference根据所使用的方法（混合或扩展），还会产生不同的结果：

• extend：扩展选择器时，仅将新选择器标记为未引用，并将其拉入引用@import语句的位置。
• mixins：当reference样式用作隐式mixin时，其规则将被混合，标记为“ not reference”，并照常显示在被引用的位置。

参考例子

这样，您可以通过执行以下操作从诸如Bootstrap之类的库中仅提取特定的，有针对性的样式：

.navbar:extend(.navbar all) {}

而且您将.navbar仅从Bootstrap中提取相关样式。

排队

使用@import (inline)包括外部文件，但不能对其进行处理。

发布了v1.5.0

例： @import (inline) "not-less-compatible.css";

当CSS文件可能不兼容时，您将使用此选项。这是因为尽管Less支持大多数已知的标准CSS，但在某些地方它不支持注释，并且不修改CSS就不支持所有已知的CSS hack。

因此，您可以使用它在输出中包含文件，以便所有CSS都在一个文件中。

减

使用@import (less)治疗导入的文件一样都不能少，无论文件扩展名。

发布了v1.4.0

例：

@import (less) "foo.css";

的CSS

使用@import (css)治疗导入的文件作为常规CSS，无论文件扩展名。这意味着import语句将保持原样。

发布了v1.4.0

例：

@import (css) "foo.less";

输出

@import "foo.less";

一旦

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

发布了v1.4.0

这是@import语句的默认行为。

例：

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

多

使用@import (multiple)允许使用相同的名称导入的多个文件。这是一次相反的行为。

发布了v1.4.0

例：

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

.a {
  color: green;
}
.a {
  color: green;
}