Less的@import指令

Less的@import指令

Less中，能够经过 @import指令来导入外部文件。@import指令能够放在代码中的任何位置，导入文件时的处理方式取决于文件的扩展名：

• 若是扩展名是 .css，文件内容将被原样输出。
• 若是是任何其余扩展名，将做为LESS文件被导入。
• 若是没有扩展名，将给他添加一个 .less 的扩展名，并做为LESS文件被导入。

例如：

1. @import "style";      // 导入 style.less
2. @import "style.less";  // 导入style.less
3. @import "style.php";   //  style.php 做为LESS文件被导入
4. @import "style.css";   // 文件内容被原样输出

一个网站经常是有多个模块组成，若是只使用一个 .less 文件，编辑起来很是不便，也不利于分工协做。此时，就能够为每一个模块单首创建 .less 文件，而后经过 @import指令将它们合并成一个文件。

假如一个网站包含产品、新闻、BBS三个模块，就能够为每一个模块单首创建一个 .less 文件，分别是 product.less、news.less、bbs.less。而后，在 style.less 中，经过 @import指令将它们合并成一个文件：

1. @import "product.less";
2. @import "news.less";
3. @import "bbs.less";

导入外部文件的一个常见应用场景，就是变量共享。一般是在一个 .less 文件中定义一些变量，其余文件只需导入这个 .less 文件，就可使用这些变量。如，在 base.less 中定义 @color 变量：

1. @color: #fff;

而后，在 styles.less 文件中，只需使用 @import指令导入base.less 文件，就可使用它的变量 @color，而没必要重复定义。代码以下：

1. @import "base.less";
2. .myclass {
3.   background-color: @color;
4. }

styles.less 编译后的CSS代码为：

1. .myclass {
2.   background-color: #fff;
3. }

另外，为了在将Less文件编译生成CSS文件时，提升对外部文件的操做灵活性，还为@import指令提供了一些配置项。语法为：

1. @import (keyword) "filename";

@import指令的配置项及其含义见表 2‑1。

表 2‑1  @import指令的配置项及含义

选项	含义
reference	使用文件，但不会输出其内容（即，文件做为样式库使用）
inline	对文件的内容不做任何处理，直接输出
less	不管文件的扩展名是什么，都将做为LESS文件被输出
css	不管文件的扩展名是什么，都将做为CSS文件被输出
once	文件仅被导入一次 （这也是默认行为）
multiple	文件能够被导入屡次
optional	当文件不存在时，继续编译（即，该文件是可选的）

一个@import指令可使用一个或多个配置项，当使用多个配置项时，各配置项之间用逗号隔开。如：

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