扩展嵌套选择器

你还可以扩展嵌套选择器。以下少

.otherChild{
  color: blue;
}

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

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

将编译为

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

用以下 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>

结果是

嵌套段落的字体颜色是绿色，而不是蓝色！ 这表明我们可以扩展嵌套选择器！