less Extend Multiple extends on a single selector


Example

The following Less

.paragraph{
  font-size: 12px;
  color: darkgrey;
  background: white;
}

.special-paragraph{
  font-size: 24px;
  font-weight: bold;
  color: black;
}

.parent{
  background: lightgrey;
  .nestedParagraph{
    &:extend(.paragraph);
    &:extend(.special-paragraph);
  }
}

Will compile to

.paragraph,
.parent .nestedParagraph {
  font-size: 12px;
  color: darkgrey;
  background: white;
}
.special-paragraph,
.parent .nestedParagraph {
  font-size: 24px;
  font-weight: bold;
  color: black;
}
.parent {
  background: lightgrey;
}

With the provided html:

<div class="parent">
  Parent Words
  <div class="nestedParagraph">
    Nested Words
  </div>
</div>

<div class="special-paragraph">
  Special Words
</div>

<div class="paragraph">
  Normal Paragraph
</div>

We see the following result:

enter image description here

In this particular example, nestedParagraph would like to use paragraph's styles, with the overrides from special-paragraph. Styles may easily be overridden by paying attention to the order elements are extended in.