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