普通混合

什么是混合

混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。

实例

less文件如下

1
2
3
4
5
6
7
8
9
10
11
12
.font{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font;
}
h2{
font-size: 24px;
.font;
}

进行编译得到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.font {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}

不带输出的混合

如果你想创建一个混合集,但是却不想让他输出到你的样式中,在不想输出的混合集的名字后面加上一个括号就可以实现

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
// 不带输出的混合,类名后面加上()
.font(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font;
}
h2{
font-size: 24px;
.font;
}

css编译如下

1
2
3
4
5
6
7
8
9
10
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}

这个时候就看不到.font的样式了

带选择器的混合

选择规则集里面的规则,混合类型(mixins)可以包含不仅是属性,而且它们还可以含有选择器。

实例

1
2
3
4
5
6
7
8
9
10
11
.hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.hover-mixin();
}
h1{
.hover-mixin();
}

css编译如下

1
2
3
4
5
6
button:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid red;
}

带参数的混合

在 LESS 中,还可以像函数一样定义一个带参数的属性集合,然后在其他选择器中像调用它

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}

css编译如下

1
2
3
4
5
6
7
8
h1:hover {
border: 1px solid #008000;
border: 21px #008000 #ff0000;
}
h2:hover {
border: 1px solid #000000;
border: 21px #000000 #ff0000;
}

带参数且有默认值的混合

我们还可以像这样给参数设置默认值,使得不用设置属性值也能被调用

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
.border(@color:red) {
border: 1px solid @color;
}
h1 {
&:hover{
.border();
}
}
h2 {
&:hover{
.border(yellow);
}
}

css编译如下

1
2
3
4
5
6
h1:hover {
border: 1px solid #ff0000;
}
h2:hover {
border: 1px solid #ffff00;
}