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中实现这一点，您应该选择父类背景颜色，并让嵌套类继承值。虽然他们需要第一代孩子继承适当的价值。