LESS - Can you chain multiple selectors together to save writing multiple classes?
13,297
Use a 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();
}
(after declaring the @orange
variable, the previous compiles to)
.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;
}
Related videos on Youtube
Author by
CMSCSS
Updated on September 18, 2022Comments
-
CMSCSS about 1 year
Instead of writing this:
.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; }
Is there a way to define a set of classes as the main selector, then change the final selector?
Something like:
.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; }