样式导入（Import Styles）

优质

小牛编辑

127浏览

2023-12-01

在上一个小节中，有关混合（mixins）的知识已经全部讲解完毕。

在软件工程中代码的拆分机制，可以帮助我们增强代码的可维护性，同样在 Less 中也提供了这种导入导出机制，帮助我们进行样式的拆分。

1. 语法定义

Import styles from other style sheets——官方定义

慕课解释：通过导入指令引入其他样式表的内容。

导出并不需要特殊的语法，但是导入需要我们使用 @import 语法并加上文件名称。此外导入机制仅编译我们用到的代码，并不会编译多余的代码。

类似于原生 CSS 语法的导入指令，在 Less 中我们也是通过 @import 指令引入其他样式表。

比如引入base.less文件：

@import 'base.less';

有一点与原生语法不同的是，在 CSS 中 @import 规则必须位于所有其他类型的规则之前。但是 Less 可以将 @import 语句放在任意位置。

.apple {
  background: red;
}

@import "base.less";

TIPS：注意，在这里 Less 中虽然允许我们将导入指令写在任意位置，个人建议同 CSS 语法一样在文件头部导入文件，便于我们快速查阅导入文件的列表并进行修改。

除了可以引入.less 文件，还可以引导不同类型的文件。

根据导入文件类型的不同，@import 语句可能会出现以下几种情形：

@import "foo";      // 引入 foo.less
@import "foo.js";  // foo.js 会被当作 less 文件引入
@import "foo.css";  // 规则不变

@import 可以帮助我们形成一个个的文件模块，使用文件模块有以下几个优点：

所以说我们可以把复用性较强语法，比如全局变量、mixins 等可以单独提取出来放到一个文件（模块）中。例如我们新建一个 mixins.less :

// mixins.less
.mixins1() {
  color: red;
}

.mixins2() {
  color: blue;
}

// componenets.less
@import 'mixins.less'

.color {
    .mixins1();
}

本章节介绍了 Less 中的文件导入机制，在语法上与 CSS 的文件导入大致相同，学习的门槛不是很高，但是 Less 拓展了 CSS 文件导入的机制，这些是需要我们重点学习的地方。