使用SASS，如何将父元素的类也应用于直接子元素？

Question

为了避免代码重复，理想情况下，我希望将一个类应用于 DOM 元素（例如“子元素”），并让应用于该元素的其余类影响该元素的直接子元素。这是一个例子来阐明这个想法：

我有这段代码：

<ul class="text-list tl-type-disc">
  <li class="text t-body t-light margin m-tiny m-vertical">some text</li>
  <li class="text t-body t-light margin m-tiny m-vertical">some text</li>
  <li class="text t-body t-light margin m-tiny m-vertical">some text</li>
  <li class="text t-body t-light margin m-tiny m-vertical">some text</li>
  <li class="text t-body t-light margin m-tiny m-vertical">some text</li>
</ul>

我想把它变成这样：

<ul class="text-list tl-type-disc children text t-body t-light margin m-tiny m-vertical">
  <li class="">some text</li>
  <li class="">some text</li>
  <li class="">some text</li>
  <li class="">some text</li>
  <li class="">some text</li>
</ul>

对此事有什么想法吗？ SASS 可以做到这一点吗？

我想做类似以下的事情，但没有成功。

ul.text-list {
    li {
        @extend .text;
    }
}

我也想过通过Javascript来做，但说实话感觉有点不对。

Answer 1

您可以使用子组合器

>

（此处的文档）来选择与第一个匹配的元素的直接子元素

CSS

.text { 
  color:red; 
}

ul.text-list {
    &>li {
        @extend .text;
    }
}

将编译成

.text, ul.text-list > li {
  color: red;
}

示例：这里