SASS CSS: Target Parent Class from Child

Question

I am using SASS and found an inconvenience. This is an example of what I am trying to do:

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

Expected CSS:

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

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 is not able to compile this, I even tried string concatenation. Is there some plugin that will do exactly the same?

NOTE: I know I can put another CSS definition like:

p.message-error{....} 

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

Thanks.

Answer 1

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     } } 

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.