Less @import 指令

在 Less 中，可以通过 @import 指令来导入外部文件。在标准 CSS 中，@import 规则必须在所有其他类型的规则之前。但是 Less 不关心你把 @import 语句放在哪里。@import 指令可以放在代码中的任何位置，例如：

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

文件扩展名

Less 可能会根据文件扩展名对 @import 语句进行不同的处理：

• 如果扩展名是 .css，文件内容将被原样输出。

• 如果是任何其他扩展名，将作为 Less 文件被导入。

• 如果没有扩展名，将给他添加一个 .less 的扩展名，并作为 Less 文件被导入。

例如：

@import "foo";      // 导入 foo.less
@import "foo.less"; // 导入 foo.less
@import "foo.php";  // 导入 foo.php 作为 Less 文件
@import "foo.css";  // 导入 CSS，保留原来内容，即内容被原样输出

less广告位

导入选项

Less 为 CSS @import 提供了几个扩展，以提供对外部文件执行更大的灵活性。

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

ss 已实现以下导入选项：

• reference: 使用 Less 文件但不输出它

• inline: 在输出中包含源文件但不处理它

• less: 将文件视为 Less 文件，无论文件扩展名是什么

• css: 将文件视为 CSS 文件，无论文件扩展名是什么

• once: 只包含文件一次（这是默认行为）

• multiple: 多次包含文件

• optional: 找不到文件时继续编译

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

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

reference

发布于 v1.5.0，除非引用，否则不将导入的样式添加到编译输出。例如：

// 文件：ext-less.less
@color: green;
@bgcolor: #F0F0F0;

.mixin(@color, @bgcolor) {
   color: @color;
   background: @bgcolor;
}

.a {
   .mixin(@color, @bgcolor);
   text-decoration: none;
}

// 文件：demo.less
@import (reference) "ext/ext-less.less";

div {
   // 引用 ext/ext-less.less 文件中的 .mixin 混入
   .mixin(#333, #F0F0F0);
}

编译 Less，输出 css 如下：

div {
 color: #333;
 background: #F0F0F0;
}

一下，reference 在导入文件中用引用标志标记每个 at-rule 和选择器，正常导入，但是当生成 CSS 时，"reference" 选择器（以及任何仅包含引用选择器的媒体查询）不会输出。 reference 样式不会出现在你生成的 CSS 中，除非引用样式用作 mixins 或 extended。

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

• extend: 当一个选择器被扩展时，只有新的选择器被标记为未被引用，并被拉入引用 @import 语句的位置。

• mixins: 当 reference 样式用作 隐式混合 时，其规则被混入，标记为 "不引用"，并正常出现在引用的位置。

参考范例：

这允许你通过执行以下操作仅从 Bootstrap 等库中提取特定的、有针对性的样式：

.navbar:extend(.navbar all) {
   //...    
}

并且你将从 Bootstrap 中仅引入与 .navbar 相关的样式。

inline

发布于 v1.5.0，包含外部文件，但不处理它们。例如：

// 文件：ext-less.less
@color: green;
@bgcolor: #F0F0F0;

.a {
   color: @color;
   text-decoration: none;
   background: @bgcolor;
}

// 文件：demo.less
@import (inline) "ext/ext-less.less";

编译 less，输出 css 如下：

@color: green;
@bgcolor: #F0F0F0;

.a {
   color: @color;
   text-decoration: none;
   background: @bgcolor;
}

当 CSS 文件可能不兼容时，你将使用它； 这是因为虽然 Less 支持大多数已知标准的 CSS，但它在某些地方不支持注释，并且在不修改 CSS 的情况下不支持所有已知的 CSS hack。

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

less

发布于 v1.4.0，将导入的文件视为 Less，而不考虑文件扩展名。例如：

@import (less) "foo.css";

css

发布于 v1.4.0，将导入的文件视为常规 CSS，而不考虑文件扩展名。例如：

@import (css) "foo.less";

输出：

@import "foo.less";

once

发布于 v1.4.0，表示该文件仅导入一次，该文件的后续导入语句将被忽略。这是 @import 语句的默认行为。例如：

// 文件：ext-less.less
@color: green;
@bgcolor: #F0F0F0;

.a {
   color: @color;
   text-decoration: none;
   background: @bgcolor;
}

// 文件：demo.less
@import (once) "foo.less";
@import (once) "foo.less"; // 该语句将被忽略

编译 less，输出 css 如下：

.a {
 color: green;
 text-decoration: none;
 background: #F0F0F0;
}

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;
}

optional

发布于 v2.3.0，允许仅在文件存在时导入该文件。如果没有 optional 关键字，Less 会在导入找不到的文件时抛出 FileError 并停止编译。