Я не уверен, как лучше сформулировать это, но на примерах.
Мой желаемый результат:
.parent-class2.parent .child {
color: red;
}
Я использую такой синтаксис.
.parent {
.child {
.parent-class2.& {
color: red;
}
}
}
Ваш синтаксис почти готов. Следует обратить внимание на две вещи:
1) SASS не любит избыточных периодов .
в селекторах (некорректных селекторах):
.parent-class2.&
период перед .&
является избыточным, поскольку &
= .parent .child
..&
неправильно компилирует в
..parent .child
2) Чтобы использовать амперсанд в середине селектора без пробелов, вам нужно будет обернуть его строковой интерполяцией &
→ #{&}
, чтобы SASS оценил его.
Вот исправленная версия:
.parent {
.child {
.parent-class2#{&} {
color: red;
}
}
}
Вы можете использовать селектор &#{&}
(«&
» является родителем, поэтому мы выбираем «родительский элемент для родителя»).
Как указано в https://css-tricks.com/the-sass-ampersand/#article-header-id-11
The interpolation brackets #{ } are needed as two touching ampersands are invalid Sass.
Вы также можете взглянуть на селектор @at-root
, который может быть полезен в вашем случае.