Sass e commerciale, seleziona genitore immediato?

Question

C'è un modo in Sass per usare la e commerciale per selezionare il genitore immediato, piuttosto che il selettore genitore dell'intero gruppo? Per esempio:

.wrapper{ 
    background-color: $colour_nav_bg; 
    h1{ 
     color: $colour_inactive; 
     .active &{ 
      color: red; 
     } 
    } 
} 

compila a:

.wrapper h1{ 
    color: grey; 
} 

.active .wrapper h1{ 
    color: red 
} 

ma quello che realmente voglio è:

.wrapper .active h1{ 
    color: red; 
} 

è l'unica opzione di scrivere la SCSS in questo modo?

.wrapper{ 
    background-color: $colour_nav_bg; 
    h1{ 
     color: $colour_inactive; 
    } 
    .active h1{ 
     color: red; 
    } 
} 

Il codice HTML si presenta così:

<ul class="wrapper"> 
    <li class="active"> 
     <h1>blah</h1> 
    </li> 
</ul> 

Answer 1

momento in cui scriviamo, non c'è selettore Sass per il genitore diretta al posto del genitore radice di un elemento. C'è & che (come sai) seleziona il genitore di radice. Ci sono anche %placeholder selectors che nasconde una regola finché non è stata extended.

Sass è open-sourced, quindi è possibile aggiungere un nuovo selettore "padre diretto".

Answer 2

È possibile aggirare questo oggi con un mixin come questo:

@mixin if-direct-parent($parent-selector) { 
    $current-sequences: &; 
    $new-sequences:(); 

    @each $sequence in $current-sequences { 
    $current-selector: nth($sequence, -1); 
    $prepended-selector: join($parent-selector, $current-selector); 
    $new-sequence: set-nth($sequence, -1, $prepended-selector); 
    $new-sequences: append($new-sequences, $new-sequence, comma); 
    } 

    @at-root #{$new-sequences} { 
    @content; 
    } 
} 

Dal momento che la & è essenzialmente una lista di liste, è possibile utilizzare le funzioni della lista (nth, set-nth, join e append) per creare la sequenza del selettore che desideri. Quindi utilizzare @at-root per generare il nuovo selettore a livello di radice. Ecco come ci si utilizza:

.grandparent-1, 
.grandparent-2 { 
    color: red; 

    .child { 
    color: blue; 

    @include if-direct-parent('.parent') { 
     color: green; 
    } 
    } 
} 

che sarà in uscita:

.grandparent-1, 
.grandparent-2 { 
    color: red; 
} 
.grandparent-1 .child, 
.grandparent-2 .child { 
    color: blue; 
} 
.grandparent-1 .parent .child, .grandparent-2 .parent .child { 
    color: green; 
} 

Answer 3

ho spesso voluto fare quello che stai chiedendo e il suo un no go. Ho sentito che puoi comunque fare quel genere di cose con Stylus. Ma c'è un'altra cosa che puoi provare, ovvero usare @at-root per teletrasportarti al di fuori del tuo albero di nidificazione. Per esempio:

.wrapper{ 
    h1{ 
     @at-root .wrapper .active h1 { 
      color: red; 
     } 
    } 
} 

Questo dovrebbe compilare verso il seguente:

.wrapper .active h1 { 
    color: red; 
} 

La parte bella è di mantenere il vostro selettore dove fa logicamente senso nella struttura di nidificazione per scopi organizzativi.

Answer 4

È necessario avvolgere @ at-radice contenuti in {}

.wrapper { 
    h1 { 
     @at-root { 
      .wrapper .active h1 { 
       color: red; 
      } 
     } 
    } 
}