Nối chọn cha mẹ đến cuối với Sass

Question

Ok, giả sử tôi có CSS ​​truyền thống sau

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

Vì vậy, tôi đã cố gắng để làm điều đó như thế này với SCSS:

.social-media { 

    /* ... */ 

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

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

Phần cuối cùng không hoạt động, vì có vẻ như ký hiệu chỉ nên xuất hiện ở đầu bộ chọn. Có cách giải quyết nào không?

Answer 1

Sass 3.2 trở lên

Điều duy nhất bạn có thể làm là đảo ngược làm tổ của bạn hay không tổ tại tất cả: .social phương tiện truyền thông {

/* ... */ 

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

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

Sass 3.3 và sau đó

Bạn có thể làm điều đó bằng cách sử dụng nội suy và chỉ thị @at-root:

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

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

Tuy nhiên, nếu chọn cha mẹ của bạn có chứa nhiều selectors, bạn sẽ cần phải sử dụng selector-append thay vì:

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

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

Output:

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