Değişken tanımlama

:root ve element üzerinde değişken tanımlamayı öğrenirsin.

:root seçicisi

:root, dokümanın kök öğesini seçer; HTML'de bu html etiketidir. Burada tanımlanan değişkenler genel kapsamda olur: sayfadaki her öğe bunları görür ve kullanır.

Bu yüzden marka renkleri, aralık değerleri gibi her yerde lazım olan değişkenler :root içine yazılır. Tek bir kaynak, tek bir güncelleme noktası.

Tanım sözdizimi

Bir değişken, normal bir CSS bildirimi gibi yazılır: ad, ikinokta, değer, noktalı virgül. Tek fark, adın iki tire ile başlamasıdır. Bu yapıya özel özellik (custom property) denir.

Örnek: --renk: #2563eb;, --boşluk: 16px;, --boyut: 1.25rem;. Değer olarak renk, uzunluk, hatta başka bir değişken bile verebilirsin; --renk-vurgu: var(--renk); geçerlidir.

Kapsam (scope)

Bir değişkenin kapsamı, tanımlandığı öğe ile sınırlıdır. :root içindeki değişken her yerde geçerliyken, bir düğme içindeki değişken yalnız o düğme ve alt öğelerinde geçerli olur.

Yerel değişken, aynı adlı genel değişkeni gölgede bırakır. Böylece aynı adı farklı bileşenlerde farklı değerle kullanabilirsin; çakışma olmaz.

Uygulama Hem genel hem yerel değişken tanımla

:root içine --renk değişkenini #2563eb değeriyle tanımla. Sonra .bayrak seçicisi içine --renk değişkenini #dc2626 değeriyle tekrar tanımla.

Örnek çözümü göster

iki ayrı seçici aç, her birine --renk tanımı koy.
Örnek çözüm:
:root {
  --renk: #2563eb;
}
.bayrak {
  --renk: #dc2626;
}

Kendini test et

Hangisi doğru bir değişken tanımıdır?
```
:root {
  ?
}
```
- renk: #2563eb;
- var(--renk): #2563eb;
- --renk: #2563eb;
- --renk = #2563eb;
Cevabı göster

--renk: #2563eb; — Doğru! --renk: #2563eb; iki tire ile başlar ve ikinokta ile değer verir.

:root içine değişken ekle

:root {
  ____: 1.5rem;
}

Cevabı göster

:root {
  --kök-boyut: 1.5rem;
}

Kapsamı eşleştir

Genel değişken

:root'ta tanımlanır
Yerel değişken

öğe içinde tanımlanır
Alt öğeler

kapsamı miras alır
Aynı ad çakışması

yerel kazanır

Sıradaki ders: Var() fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler