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.

Sıradaki ders: Özet - Bileşen stili

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler