Var() fonksiyonu

var() ile değişken kullanmayı öğrenirsin.

var() fonksiyonu

Tanımladığın değişkeni kullanmak için var() fonksiyonunu çağırırsın. İçine değişken adını yazarsın; değer otomatik olarak oraya konur. Bu, değişkeni gerçekten işe yaratan adımdır.

Örnek: color: var(--renk); ya da padding: var(--boşluk);. Değişken adını tırnak içine alma; doğrudan yaz. Böylece tanım bir yerde, kullanım onlarca yerde olur.

var() çeşitli özelliklerde

var() yalnızca renk için değil; her CSS özelliğinde çalışır. Uzunluk, yüzde, renk, gölge, hatta bir değerin yalnızca bir parçası olarak bile kullanılır.

Örnekler: padding: var(--boşluk) var(--boşluk-xl);, border: 1px solid var(--kenar), box-shadow: 0 4px var(--gölge). Değerin parçasını da değişkene bağlayabilirsin; esneklik buradan gelir.

Uygulama Bir düğmede var() kullan

.cta seçicisi içine üç özellik yaz: color: var(--text);, background: var(--brand);, padding: var(--gap);.

Örnek çözümü göster

.cta seçicisi aç, içine üç özelliği de var() ile yaz.
Örnek çözüm:
.cta {
  color: var(--text);
  background: var(--brand);
  padding: var(--gap);
}

Kendini test et

Hangisi var() ile değişkeni doğru kullanır?
- var: --renk
- var(--renk)
- --renk()
- call(--renk)
Cevabı göster

var(--renk) — Doğru! var() içine değişken adını yazarsın.
Renk özelliğinde değişkeni çağır
```
a {
  color: ____;
}
```
Cevabı göster
```
a {
  color: var(--renk);
}
```
Kullanımları eşleştir

color: var(--renk)

metin rengi
padding: var(--boşluk)

iç boşluk
background: var(--arkaplan)

arka plan
border: 1px solid var(--kenar)

kenarlık

Sıradaki ders: Değişken fallback

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler