当前位置: 首页 > 文档资料 > Less 入门教程 >

Less 混合(Mixins)

优质
小牛编辑
133浏览
2023-12-01

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() 比较好。