LESS - 你可以将多个选择器链接在一起以节省写多个类吗?

时间:2013-06-03 08:03:28

标签: less

而不是写这个:

.class-one .class-two h2, .class-one .class-two h3, .class-one .class-two h4,
.different-class-one .different-class-two h2, .different-class-one .different-class-two h3, .different-class-one .different-class-two h4
.another-class-one .another-class-two h2, .another-class-one .another-class-two h3, .another-class-one .another-class-two h4
{
  background-color: @orange;
}

有没有办法将一组类定义为主选择器,然后更改最终选择器?

类似的东西:

.class-one .class-two h2 / h3 / h4,
.different-class-one .different-class-two h2 / h3 / h4,
.another-class-one .another-class-two h2 / h3 / h4
{
  background-color: @orange;
}

1 个答案:

答案 0 :(得分:13)

使用mixin

.header-template() {
    h2, h3, h4 {
        background-color: @orange;
    }
}

.class-one .class-two,
.different-class-one .different-class-two,
.another-class-one .another-class-two {
    .header-template();
}

(在声明@orange变量之后,先前编译为)

.class-one .class-two h2,
.different-class-one .different-class-two h2,
.another-class-one .another-class-two h2,
.class-one .class-two h3,
.different-class-one .different-class-two h3,
.another-class-one .another-class-two h3,
.class-one .class-two h4,
.different-class-one .different-class-two h4,
.another-class-one .another-class-two h4 {
  background-color: #ffa500;
}