Sass .scss: iç içe ve birden çok sınıf?

SORU

18 HAZİRAN 2012, PAZARTESİ

Sass .scss: iç içe ve birden çok sınıf?

Sass kullanıyorum (.scss) benim geçerli proje.

Örnek:

HTML

<div class="container desc">
    <div class="hello>
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

Bu harika çalışıyor.

İç içe stilleri kullanırken birden çok sınıf olarak ele alınabilir.

Yukarıdaki örnekte bahsettiğim:

CSS

.container.desc {
    background:blue;
}

Bu durumda tüm div.container normalde red olabilir ama div.container.desc mavi olurdu.

Nasıl Şımarıklık container içinde bu yuva yapabilir miyim?

CEVAP

18 HAZİRAN 2012, PAZARTESİ

Derleme sonra üst seçici ile değiştirilir & kullanabilirsiniz:

Senin örneğin:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

Section Parent References doktorlar.
& tamamen çözer, eğer ana seçici kendisi iç içe, iç içe & değiştirmeden önce çözülmüş olacak.

Bu gösterim genellikle pseudo-elements and -classes yazmak için kullanılır:

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

Ancak, sizin gibi hemen hemen her pozisyonda & yerleştirebilirsiniz^*aşağıdaki Olası da.,

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

Bu şekilde iç içe geçmiş yapısını kırar ve böylece stil belirli bir kural bulmak için çaba artırabilir ancak farkında olmalısınız.

*: Boşluklar & önünde izin verilenden daha başka bir karakter. Olamaz* & - #id& *21 doğrudan birleştirme yapmak bir hata atmak istiyorsunuz.

Bunu Paylaş: