Example
The following Less:
.paragraph{
font-size: 12px;
color: blue;
background: white;
}
.parent{
font-size: 14px;
color: black;
background: green;
.nestedParagraph:extend(.paragraph){
}
}
will compile into the following css:
.paragraph,
.parent .nestedParagraph {
font-size: 12px;
color: blue;
background: white;
}
.parent {
font-size: 14px;
color: black;
background: green;
}
We have applied the styles for .paragraph to the .parent .nestedParagraph element! Assuming our HTML is:
<div class="parent">
Words
<div class="nestedParagraph">
Nested Words
</div>
</div>
Our output will be
This is one way to easily apply many pre-configured styles to deeply nested components.
Extend may additionally be used with &, the parent select feature, the below compiles to the same as above.
.paragraph{
font-size: 12px;
color: blue;
background: white;
}
.parent{
font-size: 14px;
color: black;
background: green;
.nestedParagraph{
&:extend(.paragraph);
}
}
