Амперсанд (родительский селектор )внутри вложенных селекторов [дублировать]

На этот вопрос уже есть ответы здесь:

Изменение середины селектора в Sass (, добавление/удаление классов и т. д.) (2 ответа)

Закрыто 4 года назад .

Это не задокументировано или просто невозможно?

#parent {
  #child {
    width: 75%;

   .additional_parent_class & {
      width: 50%;
    }
  }
}

Это в основном превратится в:

.additional_parent_class #parent #child {
  width: 50%;
}

Хотя это имеет смысл из-за реализации амперсанда и того, как он используется. Что, если я пытаюсь добиться этого:

#parent.additional_parent_class #child {
  width: 50%;
}

Единственный способ добиться этого — написать еще одно правило вне дочерних объявлений:

#parent{
  #child {
    width: 75%;
  }

  &.additional_parent_class #child {
    width: 50%;
  }
}

Хотя это не обязательно является «занозой в заднице» в этой реализации, кажется контрпродуктивным, если #у дочернего элемента есть собственные дочерние элементы, которые теперь должны быть продублированы в обоих правилах.

В любом случае, может быть, я просто придирчив, но было бы здорово, если бы было больше способов обхода селекторов.

задан TylerH 3 January 2019 в 20:04

0 ответов

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

css css-selectors sass

Амперсанд (родительский селектор )внутри вложенных селекторов [дублировать]

0 ответов

Похожие вопросы: