0%

6.3.4 mixin

发表于 更新于 分类于 ， ，

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;
}

原文链接: 6.3.4 mixin