CSS Değişkenleri Nedir?
İngilizce: CSS Custom Properties (Variables)
CSS değişkenleri, renk ve boşluk gibi tasarım değerlerini custom property olarak tanımlayıp tema ve bileşenlerde yeniden kullanır.
CSS Değişkenleri Nedir?
CSS değişkenleri veya custom properties, CSS içinde tekrar kullanılabilir değerler tanımlamayı sağlar. Örneğin --brand-color: #0f766e; değeri bir kez tanımlanıp buton, link, border ve ikon renklerinde kullanılabilir.
Nasıl Çalışır?
Değişkenler genellikle :root üzerinde tanımlanır ve var(--brand-color) ile okunur. CSS cascade yapısına dahil oldukları için bir bileşen, bölüm veya tema içinde yeniden tanımlanabilirler. Bu özellik onları preprocessor değişkenlerinden ayırır: tarayıcıda canlı olarak değiştirilebilirler.
:root {
--space-md: 1rem;
--brand-color: #0f766e;
}
.button {
padding: var(--space-md);
background: var(--brand-color);
}Nerede Kullanılır?
- Renk, boşluk, radius, gölge ve font gibi tasarım tokenları
- Dark mode ve çoklu tema desteği
- Bileşen varyantları ve marka özelleştirme
- JavaScript ile anlık tema veya kullanıcı tercihi güncelleme
Dikkat Edilecekler
Değişken adları tasarım sistemiyle tutarlı olmalıdır. --blue-500 gibi ham renk adları yerine --color-primary veya --surface-warning gibi semantik adlar uzun vadede daha esnektir. Değer yoksa var(--x, fallback) biçimiyle yedek tanımlanabilir.
İş Dünyasında Kullanımı
CSS değişkenleri, çok markalı arayüzler, dashboard temaları ve white-label ürünlerde aynı bileşen kodunu farklı görsel kimliklerle kullanmayı kolaylaştırır. Bu da tasarım değişikliklerinin tek noktadan yönetilmesini sağlar.