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:
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.
