Less简明教程
2.8 @import指令
阅读(

Less 基础

Less 特性

变量

Mixin

嵌套规则

运算和函数

转义字符

注释

命名空间

@import指令

Less中,可以通过 @import指令来导入外部文件。@import指令可以放在代码中的任何位置,导入文件时的处理方式取决于文件的扩展名:

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

例如:

@import "style";       // 导入 style.less
@import "style.less";  // 导入style.less
@import "style.php";   //  style.php 作为LESS文件被导入
@import "style.css";   // 文件内容被原样输出

一个网站常常是有多个模块组成,如果只使用一个 .less 文件,编辑起来非常不便,也不利于分工协作。此时,就可以为每个模块单独创建 .less 文件,然后通过 @import指令将它们合并成一个文件。

假如一个网站包含产品、新闻、BBS三个模块,就可以为每个模块单独创建一个 .less 文件,分别是 product.less、news.less、bbs.less。然后,在 style.less 中,通过 @import指令将它们合并成一个文件:

@import "product.less";
@import "news.less";
@import "bbs.less";

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

@color: #fff;

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

@import "base.less";
.myclass {
  background-color: @color;
}

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

.myclass {
  background-color: #fff;
}

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

@import (keyword) "filename";

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

表 2‑1  @import指令的配置项及含义
选项 含义
reference 使用文件,但不会输出其内容(即,文件作为样式库使用)
inline 对文件的内容不作任何处理,直接输出
less 无论文件的扩展名是什么,都将作为LESS文件被输出
css 无论文件的扩展名是什么,都将作为CSS文件被输出
once 文件仅被导入一次 (这也是默认行为)
multiple 文件可以被导入多次
optional 当文件不存在时,继续编译(即,该文件是可选的)

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

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验