less Extend Basic Example


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

enter image description here

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);
  }
}