css - SASS 普通类和嵌套类具有相同的属性

Question

我想要一个嵌套类和一个普通类使用相同的属性。例如……

.menu-container ul li.run a,
body[data-primary-tags*='run'] {
    .article-overview-header,
    .article-detail-header-strip,
    .article-detail-sub-header {
        background-color: $run;
    }   
}

显然这行不通，但有没有办法让 li.run a 和嵌套类具有相同的背景颜色？

Answer 1

使用 SASS @extend 你可以做这样的事情:

.my-special-class
    background-color: $run

.menu-container ul li.run a,
body[data-primary-tags*='run']
    @extend .my-special-class

    .article-overview-header,
    .article-detail-header-strip,
    .article-detail-sub-header
        @extend .my-special-class

要在纯 CSS 中实现这一点，您应该选择父类的背景颜色，并让嵌套类具有继承值。尽管他们需要成为第一代 child 才能继承适当的值(value)。