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;
}
Share:
13,297

Related videos on Youtube

CMSCSS
Author by

CMSCSS

Updated on September 18, 2022

Comments

  • CMSCSS
    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;
    }