Sass Parent Selector

Question

Я не уверен, что лучший способ выразить это, но на примерах.

Мой желаемый результат:

.parent-class2.parent .child {
  color: red;
}

Я использую этот синтаксис.

.parent {
  .child {
    .parent-class2.& {
      color: red;
    }
  }
}

Answer 1

Вы можете использовать селектор &#{&} («&» является родителем, поэтому мы выбираем «родитель родителя»).

Как уже упоминалось в https://css -tricks.com / the-sass-ampersand / # article-header-id-11

Необходимы интерполяционные скобки # {}, так как два касающих амперсанда являются недействительными Sass.

Вы также можете взглянуть на селектор @at-root, который может быть полезен в вашем случае.

Answer 2

Ваш синтаксис почти там. Обратите внимание на две вещи:

1) SASS не любит избыточные периоды . в селекторах (некорректные селекторы):

• При .parent-class2.& период до .& является избыточным, поскольку & = .parent .child
• Обратите внимание, что дополнительный период до .& будет неправильно компилироваться в ..parent .child

2) Чтобы использовать амперсанд в середине селектора без пробелов, вам придется обернуть его интерполяцией строк & → #{&}, чтобы SASS оценил его.

Вот исправленная версия:

.parent {
  .child {
    .parent-class2#{&} {
      color: red;
    }
  }
}