@import At-Rules

从其他样式表导入样式

在标准 CSS 中，`@import` at-rules 必须放在所有其他类型的规则之前。但 Less 并不在乎 `@import` 语句放在哪里。

示例：

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

### 文件扩展名

根据文件扩展名的不同，Less 对 `@import` 语句会有不同的处理方式：

如果文件扩展名为 .css，它将被视为 CSS 文件，`@import` 语句保持原样（参见下面的内联选项）。

如果文件有其他扩展名，它将被视为 Less 并被导入。

如果文件没有扩展名，则会添加 .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
```

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

### Import Options

Less 为 CSS `@import` CSS at-rule 提供了几种扩展，让你可以更灵活地处理外部文件。

语法：`@import (keyword) "filename"`;

实施了以下导入选项：

- `reference`: use a Less file but do not output it
- `inline`: include the source file in the output but do not process it
- `less`: treat the file as a Less file, no matter what the file extension
- `css`: treat the file as a CSS file, no matter what the file extension
- `once`: only include the file once (this is default behavior)
- `multiple`: include the file multiple times
- `optional`: continue compiling when file is not found

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

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

#### reference

使用 `@import`（引用）导入外部文件，但除非引用，否则不会将导入的样式添加到编译输出中。

发布于 v1.5.0

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

试想一下，在导入的文件中，引用标记了每一个带有引用标记的规则和选择器，导入过程正常，但在生成 CSS 时，"reference" 选择器（以及仅包含引用选择器的任何媒体查询）不会被输出，除非引用样式被用作混合样式或扩展样式，否则引用样式不会出现在生成的 CSS 中。

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

- extend: 当一个选择器被扩展时，只有新的选择器会被标记为未被引用，并在引用 @import 语句的位置被拉入。
- mixins: 当引用样式作为隐式混合元素使用时，其规则会被混合在一起，标记为 "非引用"，并正常出现在被引用的地方。

#### 参考范例
通过这种方法，您可以从 Bootstrap 等库中只调入特定的、有针对性的样式：

```less
.navbar:extend(.navbar all) {}
```

您将只从 Bootstrap 中提取与 .navbar 相关的样式。

#### inline

使用 `@import`（`inline`）包含外部文件，但不对其进行处理。

发布于 v1.5.0

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

当 CSS 文件可能与 Less 不兼容时，你就会用到它；这是因为尽管 Less 支持大多数已知标准的 CSS，但它不支持某些地方的注释，也不支持所有无需修改 CSS 的已知 CSS hack。

因此，你可以用它将文件包含在输出中，这样所有 CSS 都会在一个文件中。

#### less

使用 `@import` (`less`) 将导入的文件视为 Less 文件，而不考虑文件扩展名。

发布于 v1.4.0

示例：

```less
@import (less) "foo.css";
```
#### css

使用 `@import` (`css`) 将导入的文件视为常规 CSS，而不管文件扩展名是什么。这意味着导入语句将保持原样。

发布于 v1.4.0

示例：

```less
@import (css) "foo.less";
```
输出

```less
@import "foo.less";
```
#### once

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

发布于 v1.4.0

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

示例：

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

使用 `@import`（`multiple`）允许导入多个同名文件。这与一次的行为相反。

发布于 v1.4.0

示例：

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

```css
.a {
  color: green;
}
.a {
  color: green;
}
```
#### optional

使用 `@import`（`optional`），只有当文件存在时才允许导入。如果不使用 `optional` 关键字，Less 会在导入找不到的文件时抛出 FileError 并停止编译。

发布于 v2.3.0