CSS Değişken Üretici

Bu araç ne işe yarar?

CSS Değişken Üretici, marka renkleri, yarıçaplar ve gölgeler gibi tasarım değerlerini düzenli bir CSS özel değişkenleri (custom properties) bloğuna dönüştürür. Her satıra bir ad, değer ve isteğe bağlı açıklama girer; hangi seçicide (örneğin :root) tanımlanacağını seçersiniz. Tasarım sistemi kuran veya temalandırma yapan ön uç geliştiriciler için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır?

Tabloya değişkenleri ekler, adlarını '--' önekiyle yazar ve değerlerini belirlersiniz. Değer geçerli bir hex renk (örneğin #3b82f6) olduğunda yanında bir renk seçici belirir, böylece tonu görsel olarak ayarlayabilirsiniz; ancak '8px', '0 1px 3px rgba(0,0,0,0.1)' gibi her türlü CSS değerini de girebilirsiniz. Açıklama eklediğiniz satırlar çıktıya '/* ... */' yorumu olarak yansır. Üreteç tümünü seçtiğiniz seçici altında toplar ve tek tıkla kopyalanabilir hale getirir.

Tasarım sistemleri için neden değişken kullanmalı?

Özel değişkenler renk paletinizi, boşluklarınızı ve gölgelerinizi tek bir yerde toplar; bir değeri değiştirdiğinizde onu kullanan her bileşen otomatik güncellenir. Bu yaklaşım koyu/açık tema geçişlerini, marka yenilemelerini ve tutarlı aralık ölçeklerini çok kolaylaştırır. Değişkenler 'var(--primary)' ile çağrılır ve SASS değişkenlerinin aksine tarayıcıda çalışma zamanında değiştirilebilir, bu da JavaScript ile dinamik temalandırmaya olanak tanır.

Sıkça sorulan sorular

Değişken adlarının başına neden '--' geliyor?

CSS özel değişkenleri dilin gereği iki tireyle başlamak zorundadır, örneğin '--primary'. Araç bu öneki sizin için otomatik ekler; siz yalnızca ad kısmını yazarsınız ve adlardaki boşluklar otomatik olarak tireye dönüştürülür.

:root yerine başka bir seçici kullanabilir miyim?

Evet. Seçici alanına '.theme-dark', '.card' gibi herhangi bir seçici yazabilirsiniz. Değişkenleri belirli bir bileşene veya tema sınıfına kapsamak istediğinizde bu kullanışlıdır; :root ise değişkenleri tüm belgeye global yapar.

Renk dışında değer girebilir miyim?

Evet. Renk seçici yalnızca değer geçerli bir hex renk olduğunda görünür; ancak boyut, yarıçap, gölge veya 'clamp()' gibi her geçerli CSS değerini elle yazabilirsiniz.