Verwenden des kaufmännischen Undersands (SASS Eltern Selektor) in verschachtelten Selektoren

Question

Okay, das hat mich gestört, seit ich Sass/Scss für das letzte Jahr oder so verwendet habe. Ich verstehe den Elternselektor in seinem allgemeinen Sinn.

Dies ist, wo ich kämpfen (ob es nicht dokumentiert ist oder möglich, nur nicht):

#parent { 
    #child { 
    width: 75%; 

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

Dies wird in grundsätzlich drehen:

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

Während dieser Sinn für die aufgrund der Umsetzung macht kaufmännisches Und und wie es benutzt wird. Was passiert, wenn ich es bekommen werde versuchen, dies zu erreichen:

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

Der einzige Weg, ich in der Lage gewesen, dies zu erreichen, ist durch eine weitere Regel außerhalb der Kinder Erklärungen zu schreiben:

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

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

Während dieser ist in dieser Implementierung nicht notwendigerweise ein "Schmerz im Hintern", es scheint kontraproduktiv, wenn #child eigene Kinder hat, die nun in beiden Regeln dupliziert werden müssen.

Wie auch immer, vielleicht bin ich nur wählerisch, aber es wäre toll, wenn es mehr Möglichkeiten gäbe, die Selektoren zu durchqueren.

Wer weiß etwas, was ich nicht?

Danke!

Answer 1

Ich stimme zu, es wäre sehr hilfreich. Leider ist das momentan in SASS (oder irgendeinem anderen CSS-Präprozessor, den ich kenne) nicht möglich.

Answer 2

Obwohl dies derzeit nicht möglich ist, sind diese und viele ähnliche Verbesserungen der &-Syntax für die Veröffentlichung in Sass 3.3 vorgesehen. Sie können der Diskussion über das Feature in der Sass-Ausgabe here folgen.

Answer 3

Dies ist in v3.4 möglicherweise in 3.3 aber nicht sicher. Ich bin jedoch kein Fan der Syntax. & ist viel einfacher. Wünschte, es für einen Alias ​​so etwas wie &^war :)

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