6.3.4 mixin

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

6.3.4 mix in

所谓mixin就相当于一段可重用的代码块,类似于C语言的宏定义。与C语言的宏定义类似,mixin还支持参数,因此**mixin可以很方便地将某段通用CSS定义提取出来,方便后面复用它**。
例如如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@block-width : 300px;
@block-height : 120px;
@block-back : rgba(86,61,124,.15);
// mixin
.make-block(@width: @block-width, @height: @block-height, @back: @block-back) {
    width: @width;
    height: @width;
    border: 1px solid black;
    background-color: @back;
    border-radius: 5px;
}
.md-block {
    .make-block();
}
.big-block {
    .make-block(500px, 200px, #eee);
}
.small-block {
    .make-block(150px, 60px, #bbb);
}

在以上代码中的:

1
2
3
4
5
6
7
8
// mixin
.make-block(@width: @block-width, @height: @block-height, @back: @block-back) {
    width: @width;
    height: @width;
    border: 1px solid black;
    background-color: @back;
    border-radius: 5px;
}

就是定义了一个名为.make-block的mixin,该mixin支持3个参数,这3个参数都被指定了默认值,因此使用时也可不传入参数。mixin的语法是以.号开头,这**和CSS的class选择器定义有点类似,但mixin可以支持参数**。
定义了mixin之后,在后面代码中可以复用这些mixin。在上面的源码中使用.make-block这个mixin定义了.md-block、.big-block 和.small-block 这3个样式。上面代码经编译后会生成如下CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.md-block {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: rgba(86, 61, 124, 0.15);
  border-radius: 5px;
}
.big-block {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  background-color: #eee;
  border-radius: 5px;
}
.small-block {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: #bbb;
  border-radius: 5px;
}