Aggiungere il selettore di genitore alla fine con Sass

Question

Ok, supponiamo di avere la seguente tradizionale CSS

.social-media { /* ... */ } 
.social-media .twitter { /* ... */ } 
.social-media .facebook { /* ... */ } 
ul.social-media { /* ... */ } 

Così, ho cercato di fare in questo modo con SCSS:

.social-media { 

    /* ... */ 

    .twitter { 
     /* ... */ 
    } 
    .facebook { 
     /* ... */ 
    } 

    // Here's the problem: 
    ul& { 
     /* ... */ 
    } 
} 

L'ultima parte non funziona, perché sembra che la e commerciale dovrebbe apparire solo all'inizio di un selettore. C'è una soluzione?

Answer 1

Sass 3.2 maggiorenni

L'unica cosa che puoi fare è invertire il nidificazione o no nido a tutti: .social-media {

/* ... */ 

    .twitter { 
     /* ... */ 
    } 
    .facebook { 
     /* ... */ 
    } 
} 

ul.social-media { 
    /* ... */ 
} 

Sass 3.3 e successivamente

È può farlo usando l'interpolazione e la direttiva @at-root:

.social-media { 
    /* ... */ 

    // Here's the solution: 
    @at-root ul#{&} { 
     /* ... */ 
    } 
} 

Tuttavia, se il selettore principale contiene più selettori, è necessario utilizzare selector-append invece:

.social-media, .doodads { 
    /* ... */ 

    // Here's the solution: 
    @at-root #{selector-append(ul, &)} { 
     /* ... */ 
    } 
} 

uscita:

.social-media, .doodads { 
    /* ... */ 
} 
ul.social-media, ul.doodads { 
    /* ... */ 
}