css - SASS CSS : Target Parent Class from Child

Question

我正在使用 SASS 并发现了一个不便。这是我正在尝试做的一个例子:

.message-error {
    background-color: red;

    p& {
        background-color: yellow
     }
  }

预期的 CSS:

.message-error {
    background-color: red;
}
p.message-error {
    background-color: yellow ;
}

想法:所有带有 .message-error 的元素都将是红色的，除非它是 p.message-error。这不是现实生活中的情况，只是为了展示一个例子。

SASS 无法编译它，我什至尝试过字符串连接。是否有一些插件可以做完全相同的事情？

注意:我知道我可以添加另一个 CSS 定义，例如:

p.message-error{....}

...在下面，但我想避免这种情况，并为所有 .message-error 定义使用一个地方。

谢谢。

Answer 1

从 Sass 3.4 开始，现在支持它。语法如下所示:

.message-error {
    background-color: red;

    @at-root p#{&} {
        background-color: yellow
    }
}

注意 @at-root 指令和符号上的插值语法。未能包含 @at-root 指令将导致选择器像 .message-error p.message-error 而不是 p.message-error.