跳到主要内容

@import At-Rules

从其它样式表导入样式

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

例如：

.foo {
  background: #900;
}
@import "this-is-valid.less";

文件扩展名​

根据文件扩展名，@import 语句在 Less 中可能会有不同的处理方式：

  • 如果文件扩展名为 .css，它将被视为 CSS，@import 语句将保持不变（参见下面的 inline 选项）。
  • 如果它有 任何其它扩展名，它将被视为 Less 并被导入。
  • 如果它没有扩展名，则会附加 .less 并作为导入的 Less 文件包含。

例如：

@import "foo"; // 导入 foo.less
@import "foo.less"; // 导入 foo.less
@import "foo.php"; // 将 foo.php 作为 Less 文件导入
@import "foo.css"; // 语句保持不变，不做处理

以下选项可用于覆盖此行为。

导入选项​

Less 提供了几个扩展 CSS @import CSS at-rule 的选项，以提供更多对外部文件的灵活性。

语法：@import (关键字) "文件名";

已实现以下导入选项：

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

允许在一个 @import 中使用多个关键字，你需要使用逗号分隔关键字：

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

reference​

使用 @import (reference) 导入外部文件，但不将导入的样式添加到编译输出中，除非被引用。

已发布 v1.5.0

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

想象一下，reference 在导入的文件中标记每个 at-rule 和选择器，使用正常导入，但在生成 CSS 时，“reference”选择器（以及仅包含参考选择器的任何媒体查询）不会输出。除非将参考样式用作 mixins 或 extended。

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

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

reference 示例​

这使你可以从库（如 Bootstrap）中仅拉取特定的、有针对性的样式，例如：

.navbar:extend(.navbar all) {
}

这样，你将仅拉取与 Bootstrap 相关的 .navbar 样式。

inline​

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

发布于 v1.5.0

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

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

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

less​

使用 @import (less) 将导入的文件视为 Less，而不管文件扩展名如何。

发布于 v1.4.0

示例：

@import (less) "foo.css";

css​

使用 @import (css) 将导入的文件视为常规 CSS，而不管文件扩展名如何。这意味着导入语句将保持不变。

发布于 v1.4.0

示例：

@import (css) "foo.less";

输出：

@import "foo.less";

once​

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

发布于 v1.4.0

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

示例：

@import (once) "foo.less";
@import (once) "foo.less"; // 这个语句将被忽略

multiple​

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

发布于 v1.4.0

示例：

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

输出结果

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

可选项​

使用 @import (optional) 可以在文件存在时才允许导入。如果没有使用 optional 关键字，Less 会抛出一个 FileError 并停止编译，当导入一个找不到的文件时。

发布版本 v2.3.0。