The following Less
div.paragraph{
color: blue;
}
*.paragraph{
color: green;
}
.otherClass.paragraph{
color: red;
}
.paragraph.otherClass{
color: darkgrey;
}
.parent{
.nestedParagraph{
&:extend(.paragraph);
}
}
Will compile into
div.paragraph {
color: blue;
}
*.paragraph {
color: green;
}
.otherClass.paragraph {
color: red;
}
.paragraph.otherClass {
color: darkgrey;
}
Using the following HTML
<div class="parent">
Parent Words
<div class="nestedParagraph">
Nested Words
</div>
</div>
<div class="paragraph">
Paragraph
</div>
<ul class="paragraph">
ul paragraph
<li>1</li>
<li>2</li>
</ul>
<div class="otherClass paragraph">
Other Class Paragraph
</div>
<div class="paragraph otherClass">
Other Class Paragraph
</div>
Our result is
We can see that Less Extend only supports exact matching, as the Nested Words do not have styled applied to them.