而不是写这个:
.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;
}
答案 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;
}