Question

Mixins 在 Less 中有很多的用途，比如作为一个函数处理参数和返回参数，也可以像 :extend 一样进行样式的复用，这个小节我们主要学习混合（Mixins）进行样式复用相关方面的内容，这也是混合的基础用法。

1. 什么是混合？

“mix-in” properties from existing styles。——官方定义

慕课解释： “mix-in” 的中文翻译为 “混合” 。简而言之，在 Less 中 Mixins 的作用就是，在已有的样式中添加其他已经定义好的属性集合，从而达到属性复用的效果。

2. 语法详情

在 Less 中，使用 Mixins 我们可以轻松的把 classA 引入到 classB ，从而实现属性上的复用。任何 class 或者 id 都可以引入。

• 输入的 Less 代码如下：

/* Less */
.a {
  color: red;
}

.mixin {
  .a();
}

• 编译后的 CSS 代码：

/* css */
.a {
  color: red;
}

.mixin {
  color: red;
}

代码解释：使用 Mixins 前提是需要先定义一个样式类（.a），然后在引用的样式类（.mixin-class）中写入之前定义的样式类名称，并在名称后加上 “()” 来表示一个 Minxins 。我们可以把 Mixins 当作一个样式的集合，同样后面需要加上 “;” ，避免造成语法错误。

3. 使用场景

Mixins 的适用于需要样式复用的场景。比如以一个 button 的样式来说，可以复用以下几种属性：

• 主题色
• 字体大小
• 形状

以上只是举例，在真实的使用场景中可以根据需求复用不同种类的样式。

4. 包含选择器的 Mixins

Mixins 不仅可以复用选择器中的样式，还可以复用各种选择器伪类的样式。如下代码：

• 输入代码：

.hover-mixin {
  &:hover {
    border: 1px solid red;
  }
}

button {
  .hover-mixin();
}

• 输出代码：

.hover-mixin:hover {
  border: 1px solid red;
}

button:hover {
  border: 1px solid red;
}

5. 包含 !important 关键字的 Mixins

如果在 Mixins 后面标记 !important 关键字，则 Mixins 内的所有属性均会添加 !important 关键字。如下代码：

• 输入代码：

.color {
  color: red;
  background: blue;
}

.background {
  .color() !important;
}

• 输出代码：

.color {
  color: red;
  background: blue;
}

.background {
  color: red !important;
  background: blue !important;
}

6. 不输出 Mixins 源码

从上面的示例代码中，我们可以看到定义的 Mixins 也被编译到了输出的代码中，但是某些情况下这些样式造成不必要的重复。此时我们可以在定义 Mixins 时在类的名称后加上 “()” ，这样 Mixins 所定义的样式就不会编译到输出的代码中了。

• 输入代码：

.color-mixin() {//加上()
  color: red;
}

.bg {
  .color-mixin();
}

• 输出代码：

.bg {
  color: red;
}

代码解释：可以看出来上面输出代码中没有下面代码：

.color-mixin() {//加上()
  color: red;
}

7. Mixins 命名空间

Mixins 同其他逻辑语言一样，Less 中也有命名空间的概念。

我们可以创建一个类或者 ID 选择器作为一个命名空间，这样我们可以把定义的 Mixins 放在下面，避免与引入的其他文件造成冲突：

.namespace { //命名空间
  .bg {
    color: red;
  }
}

代码解释：.namespace 就是一个命名空间。

在引用 .bg 样式时，我们可以使用以下几种方式：

.namespace > .bg;
.namespace > .bg();
.namespace .bg;
.namespace .bg();
.namespace.bg;
.namespace.bg();

代码解释：以上几种写法是等效的。

下面看一个完整的例子：

• 输入代码：

.namesapce {
  .bg() {
    color: red;
  }
}

.content {
  .namesapce>.bg();//调用
}

• 输出代码：

.content {
  color: red;
}

8. 经验分享

• 定义的 Mixins 名称后面如果不加 “()” ，则会编译到生成的 css 中，反之则不会。
• 引用的 Mixins 名称后的 “()” 可以省略，但是为了避免代码混淆，建议大家在引用时加上 ‘()’ 。

  .a {
    color: red;
  }

  .b {
    // .a() 或者 .a 都可以
    .a();
  }

9. 小结

本章节主要介绍了 Mixins 在样式复用方面的内容，在该功能上与上一个章节讲到的 :extend() 比较类似 ，如果复用的代码不用出现在编译后的代码中，推荐使用 Mixins 进行代码的复用，反之使用 :extend() 比较好。