less Extend Extending nested selectors


Example

You may also extend nested selectors. The below Less

.otherChild{
  color: blue;
}

.otherParent{
  color: red;
  .otherChild{
    font-size: 12px;
    color: green;
  }
}

.parent{
  .nestedParagraph{
    &:extend(.otherParent .otherChild);
  }
}

Will compile to

.otherChild {
  color: blue;
}
.otherParent {
  color: red;
}
.otherParent .otherChild,
.parent .nestedParagraph {
  font-size: 12px;
  color: green;
}

With the following html

<div class="otherParent">
  Other Parent Words
  <div class="otherChild">
    Other Nested Words
  </div>
</div>

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

The result is

enter image description here

The font color for the nested paragraph is green, not blue! This shows we can extend nested selectors!