Uso della e commerciale (selettore genitore SASS) all'interno di selettori annidati

Question

Ok, questo mi ha infastidito da quando uso Sass/Scss da circa un anno. Comprendo il selettore genitore nel suo senso generale.

Questo è dove faccio fatica (se non è documentato o semplicemente non è possibile):

#parent { 
    #child { 
    width: 75%; 

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

Questo sarà essenzialmente trasformerà in:

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

Anche se questo ha un senso a causa della realizzazione del e commerciale e come è usato Che cosa succede se sto cercando di farlo per raggiungere questo obiettivo:

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

L'unico modo sono stato in grado di raggiungere questo obiettivo è quello di scrivere un'altra regola al di fuori delle dichiarazioni del bambino:

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

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

Mentre questo non è necessariamente un "dolore al culo" in questa implementazione, sembra controproducente se #child ha figli propri che ora dovranno essere duplicati in entrambe le regole.

In ogni caso, forse sono solo pignolo, ma sarebbe bello se ci fossero più modi per attraversare i selettori.

Qualcuno sa qualcosa che io non?

Grazie!

Answer 1

Sono d'accordo che sarebbe molto utile. Sfortunatamente, non è attualmente possibile in SASS (o qualsiasi altro preprocessore CSS che conosca).

Answer 2

Anche se non è attualmente possibile, questo e molti altri miglioramenti alla sintassi & sono previsti per il rilascio in Sass 3.3. Puoi seguire la discussione sulla funzione sul numero di Sass here.

Answer 3

Questo è capace in v3.4 potrebbe essere in 3.3 ma non è sicuro. Tuttavia non sono un fan della sintassi. & è molto più semplice. Vorrei che ci fosse qualcosa di simile &^per un alias :)

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