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