Вот мой код:
.grid {
> li {
// li styles
.text & {
// new li styles if .grid also has a class of .text
}
}
}
Это неправильно, похоже, это работает только в том случае, если я нацеливаюсь на что-то выше, чем .grid, но я хочу иметь возможность нацеливаться на .grid.text li {}, чтобы я мог изменять стили li в зависимости от того, есть ли у .grid дополнительный класс, независимо от того, что живет .grid. внутри. Это возможно?
Я пытаюсь избежать этого:
.grid {
> li {
// li styles
}
&.text {
li {
// new li styles
}
}
}






Вы можете сделать это, используя @at-rootдиректива, сохраняя вложенные правила
например этот фрагмент
.grid {
> li {
color: #fff;
@at-root {
.text#{&} {
color: #000;
}
}
}
}
на SASS >= 3.3 компилируется в
.grid > li {
color: #fff;
}
.text.grid > li {
color: #000;
}
Почему избегаете второго ответа? Чтобы ответить на ваш вопрос в заголовке, рассматривали ли вы возможность использования комбинации селекторов :not(:first)?