sass css:从子级目标父类 [英] sass css: target parent class from child

问题描述

我正在使用sass并发现问题.这是我要执行的操作的一个示例:

I am using sass and found a problem. This is an example of what I am trying to do:

.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.这不是现实情况，仅举一个例子.

The idea: all elements with .message-error will be red, except if it is p.message-error. This is not real-life situation, just to show an example.

SASS无法编译它，我什至尝试了字符串串联.有一些插件可以完全一样吗?

SASS is not able to compile this, I even tried string concatenation. Is there some plugin that will do exactly the same?

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

NOTE: I know I can put another css definition like

p.message-error{....}

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

under, but I would like to avoid that and use one place for all .message-error definitions.

谢谢.

推荐答案

从Sass 3.4开始，现在支持该功能.语法如下:

As of Sass 3.4, this is now supported. The syntax looks like this:

.message-error {
    background-color: red;

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

请注意@at-root指令和&符号上的插值语法.如果不包含@at-root指令，则会导致选择器，例如.message-error p.message-error而不是p.message-error.

Note the @at-root directive and the interpolation syntax on the ampersand. Failure to include the @at-root directive will result in a selector like .message-error p.message-error rather than p.message-error.

这篇关于sass css:从子级目标父类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！