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

Я понимаю родительский селектор в его общем смысле.

Вот где я борюсь (не документировано ли это или просто невозможно):

#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%;
  }
}

Несмотря на то, что в этой реализации это не обязательно является "болью в заднице", это кажется контрпродуктивным, если у #child есть собственные #child, которые теперь необходимо будет дублировать в обоих правилах.

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

Ответы

Ответ 1

Хотя в настоящее время это невозможно, это и многие аналогичные улучшения синтаксиса & намечены для выпуска в Sass 3.3. Вы можете следить за обсуждением этой функции по проблеме Sass здесь.

Ответ 2

Я согласен, что это будет очень полезно. К сожалению, в настоящее время это невозможно в SASS (или любом другом препроцессоре CSS, о котором я знаю).

Ответ 3

Это способный в v3.4 может быть в 3.3, но не уверен. Однако я не поклонник синтаксиса. & Амп; намного проще. Желание было что-то вроде & ^ для псевдонима:)

#parent {
    #child {
        width: 75%;
        @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
            width: 50%;
        }  
    }
}