Я использую 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.
Спасибо.
Это - то, как Вы делаете это
.Parent {
$parentClass: &;
&-Child {
#{$parentClass}:focus & {
border: 1px solid red;
}
#{$parentClass}--disabled & {
background-color: grey;
}
}
}
, Это работает на любом уровне afaik, и однако глубоко Вы хотите пойти.