Родительский селектор Sass

Я не уверен, как лучше сформулировать это, но на примерах.

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

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

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

.parent {
  .child {
    .parent-class2.& {
      color: red;
    }
  }
}
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации
Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...
1
0
192
2

Ответы 2

Ваш синтаксис почти готов. Следует обратить внимание на две вещи:

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, который может быть полезен в вашем случае.

Другие вопросы по теме