Nested compound
&.class gibi bileşik seçicileri öğrenirsin.
Bileşik seçiciler nested
Bazen dış seçiciyi bir sınıfla birleştirmen gerekir: .tab.active gibi. Nesting içinde &.active yazımı bunu üretir. .tab { &.active { background: navy; } }, .tab.active { background: navy; } anlamına gelir.
Boşluk olmadan & ve .active yan yana gelir; böylece aynı öğeye hem .tab hem .active uygulanır. Boşluk bırakırsan torun ilişkisi oluşur ve başka öğeyi yakalarsın.
Doğrudan çocuk & ile
Doğrudan çocuk birleştiricisi (>) de & ile birlikte kullanılabilir. .menu { & > li { } } yazımı .menu > li üretir; yalnızca doğrudan çocuk li öğelerini yakalar.
Aynı şekilde & + h2 bir sonraki kardeşi, & ~ p sonraki tüm kardeşleri yakalar. &, dış seçicinin adını doğru konumda tutar.
Uygulama Sekme için selected ve çocuk ekle
.tab seçicisinin içine iki nested bölüm ekle: birincisi &.selected bileşik seçicisi, içine color: navy; ikincisi & > span doğrudan çocuk seçicisi, içine font-weight: 600.
Örnek çözümü göster
.tab bloğunun içine iki bölüm ekle.
Örnek çözüm:
/* .tab içine selected ve span ekle */
.tab {
padding: 0.5rem;
&.selected {
color: navy;
}
& > span {
font-weight: 600;
}
}Öznitelik ile birleştirme
Aynı mantık öznitelik seçicilerle de çalışır. .field { &[disabled] { opacity: 0.5; } } yazımı .field[disabled] üretir; devre dışı bırakılmış alanları yakalar.
Sınıf, öznitelik ve sözde sınıf birlikte de kullanılabilir: &.active:focus. & dış seçicinin adını doğru konumda tuttukça kombinasyonlar istediğin gibi çalışır.
Kendini test et
-
&.is-open yaz
.panel { ____ { display: block; } }Cevabı göster
.panel { &.is-open { display: block; } } -
&.active neyi eşleştirir?
.tab { &.active { background: navy; } }- Yalnızca .active sınıfına sahip tüm öğeleri
- Hem .tab hem .active sınıfına sahip öğeyi
- .tab içindeki .active çocuğunu
- .tab öğesinin bir sonraki kardeşini
Cevabı göster
Hem .tab hem .active sınıfına sahip öğeyi — Doğru. &.active .tab.active olur; iki sınıf da aynı öğeye uygulanır.