Anexe o seletor pai ao final com Sass

Ok, suponha que eu tenha o seguinte CSS tradicional

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

Então, tentei fazer assim com o SCSS:

 .social-media { /* ... */ .twitter { /* ... */ } .facebook { /* ... */ } // Here's the problem: ul& { /* ... */ } } 

A última parte não funciona, porque parece que o “e” comercial só deve aparecer no início de um seletor. Existe uma solução alternativa?

Sass 3.2 e mais velhos

A única coisa que você pode fazer é reverter seu aninhamento ou não aninhar-se: .social-media {

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

Sass 3.3 e posterior

Você pode fazer isso usando interpolação e a diretiva @at-root :

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

No entanto, se seu seletor pai contiver vários seletores, será necessário usar o selector-append :

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

Saída:

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