Ben SCSS ile böyle yapmak çalıştı,

Question

Tamam,

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

Yani şu geleneksel CSS olduğunu varsayalım Sass ile sona ebeveyn seçici ekleme çalışmaz, çünkü ampersan sadece bir selektörün başında görünmelidir. Bir çözüm var mı?

Answer 1

Sass 3.2 ve üzeri

Yapabileceğiniz tek şey de tüm iç içe veya iç içe ters geçerli: .social-medya {

/* ... */ 

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

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

Sass 3.3 ve üstü

You interpolasyon ve @at-root yönergesini kullanarak bunu yapabilir:

Ebeveyninizin seçici birden seçicileri içeriyorsa

Ancak, bunun yerine selector-append kullanmanız gerekir:

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

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

Çıktı:

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