Less_混合

混合允许您将一个类的属性用于另一个类，并且包含类名作为其属性

xxxxxxxxxx
.p1 {
    color: red;
}

.p2 {
    background: #64d9c0;
    .p1();
}

.p3 {
    background: #DAA520;
    .p1;
}

混合添加括号

如果你想创建一个混合，但是你不希望这个混合出现在你的CSS中，在混合定义后面加圆括号

xxxxxxxxxx
.my-mixin {
    color: black;
}

.my-other-mixin() {
    background: white;
}

.class {
    .my-mixin();
    .my-other-mixin();
}

混合中使用!important

在混合调用后使用!important关键字将它继承的所有属性标记为!important

xxxxxxxxxx
.foo (@bg: #f5f5f5; @color: #900) {
    background: @bg;
    color: @color;
}

.unimportant {
    .foo();
}

.important {
    .foo() !important;
}

带参数的混合

混合也可以接受参数，这些参数是混合时传递给选择器块的变量

xxxxxxxxxx
.border-radius(@radius,@color:red) {
    border-radius: @radius;
    color: @color
}
#header {
    .border-radius(4px,blue);
}
.button {
    .border-radius(6px);
}

实时效果反馈

1. 下列代码输出的CSS结果是：

xxxxxxxxxx
.border-radius(@radius,@color:red) {
    border-radius: @radius;
    color: @color
}
.button {
    .border-radius(6px);
}

A

xxxxxxxxxx
.button {
  border-radius: 6px;
}

B

xxxxxxxxxx
.button {
  border-radius: 6px;
  color: "";
}

C 编译报错

D

xxxxxxxxxx
.button {
  border-radius: 6px;
  color: red;
}

答案

1=>D