css - 更灵活的占位符选择器使用

Question

给定一个占位符选择器

%theme
    .red
        :color red
        :background-color blue

    .yellow
        :color yellow
        :background-color green

我现在想继续将其编译为 css，例如

#content.special_page .red h2, #content.special_page .red .items li { ... }
#content.special_page .yellow h2, #content.special_page .yellow .items li { ... }

但这似乎是不可能的......

#content.special_page h2
    @extend %theme

...将呈现给...

#content.special_page h2 .red { ... }
#content.special_page h2 .yellow { ... }

...并且占位符选择器不允许我传递任何参数或内容。

那么是否有任何 sass 功能可以解决这个问题，甚至是一些棘手的 css 选择器？

Answer 1

正如我在回答类似问题时发现的那样，您所看到的行为显然是@extend正常工作的。