Я использую 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.

Благодарю.