CSS değişkenleri nedir?

Custom property (--name) kavramını öğrenirsin.

CSS değişkeni nedir?

Bir CSS değişkeni (custom property), bir değeri adıyla saklayıp sonra tekrar kullanma yoludur. Adı iki tire ile başlar: --renk, --boşluk, --boyut. Tanımdan sonra var(--renk) biçiminde çağrılır.

Değişkenler CSS'in kendi deposudur: marka rengini tek yerde yazarsın, on yerde okursun. Değer değiştiğinde yalnızca tanımı güncellersin; tüm eşleşen yerler otomatik güncellenir.

Neden değişken kullanırız?

Aynı rengi, aynı boşluğu on yerde tekrar tekrar yazmak yorucudur ve hataya açıktır. Marka rengini #2563eb yerine var(--renk) ile kullanırsan, renk değiştiğinde yalnızca :root içindeki tek satırı güncellersin.

Sonuç: tutarlı görünüm, daha az hata, daha hızlı değişiklik. Ekip arkadaşların hangi rengin marka rengi olduğunu da hemen görür.

Tasarım jetonu (design token)

Bir tasarım jetonu, markanın en küçük yeniden kullanılabilir birimidir: marka rengi, aralık boyutu, köşe yarıçapı, gölge tonu. Bunları değişken olarak tanımlayıp tüm sayfada kullanırsın; böylesi tutarlı bir arayüz sağlar.

Örneğin --renk-marka, --boşluk-orta, --kenar-yarıçap birer jetondur. Tasarımcı bir jetonu günceller, tüm arayüz aynı anda değişir; geliştiricinin stillere dokunması gerekmez.

Uygulama İlk değişkenini tanımla

:root seçicisi içine --bg adlı bir değişken tanımla ve değerini #0f172a yap.

Örnek çözümü göster

:root seçicisi aç, içine --bg: #0f172a; yaz.
Örnek çözüm:
:root {
  --bg: #0f172a;
}

Kendini test et

Hangisi geçerli bir CSS değişkeni adıdır?
- --renk
- renk
- $renk
- @renk
Cevabı göster

--renk — Doğru. CSS değişkenleri iki tire ile başlar: --renk.
Kavramları eşleştir

--renk

özel özellik adı
var(--renk)

değişken kullanımı
tasarım jetonu

yeniden kullanılabilir değer
:root

genel kapsam

Geçerli bir değişken adı yaz

:root {
  ____: #2563eb;
}

Cevabı göster

:root {
  --mavi: #2563eb;
}

Sıradaki ders: Değişken tanımlama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler