sass css: целевой родительский класс из дочернего

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

Спасибо.

46
задан Bernoulli IT 7 March 2018 в 10:49
поделиться

1 ответ

Это - то, как Вы делаете это

.Parent {
  $parentClass: &;

  &-Child {
    #{$parentClass}:focus & {
      border: 1px solid red;
    }

    #{$parentClass}--disabled & {
      background-color: grey;
    }
  }
}

, Это работает на любом уровне afaik, и однако глубоко Вы хотите пойти.

0
ответ дан 26 November 2019 в 20:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: