Less 混合(Mixins)
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()
比较好。