Dołącz selektor nadrzędnego do końca z Sass

Question

Ok, załóżmy, że mam następujący tradycyjne CSS

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

Tak, starałem się zrobić to tak z SCSS:

.social-media { 

    /* ... */ 

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

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

ostatnia część nie działa, ponieważ wydaje się, że ampersand powinien pojawić się tylko na początku selektora. Czy jest w pobliżu praca?

Answer 1

Sass 3.2 i starszych

Jedyną rzeczą, jaką możesz zrobić, to odwrócić zagnieżdżania czy też nie gniazdo w ogóle: .social-Media {

/* ... */ 

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

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

Sass 3.3 i później

You można to zrobić za pomocą interpolacji i dyrektywy @at-root:

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

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

Jeśli jednak rodzic selektor zawiera wiele selektorów, trzeba użyć selector-append zamiast:

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

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

wyjściowa:

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