CSS Değişkenleri
CSS kodunuzdaki özel değişken bildirimlerini ve var() referanslarını ayrıştırarak kullanım sayılarını ve atıl değişkenleri raporlar.
Aracı çalıştır
CSS Değişkenleri aracı, stil dosyalarınızdaki özel özellikleri (`--degisken-adi`) ve bunlara yapılan `var()` başvurularını ayrıştırarak düzenli bir döküm sunar. Kod tabanınız genişledikçe tanımlanan CSS değişkenlerinin nerede kullanıldığını veya hangilerinin atıl kaldığını takip etmek zorlaşabilir. Bu araç, metin alanına yapıştırdığınız CSS içeriğini tarayarak iki tire ile başlayan tüm değişken bildirimlerini, atanmış değerleri ve ilişkili referansları tespit eder.
İşlem tamamlandığında sonuç paneli; toplam bildirim sayısını, hiçbir yerde çağrılmayan değişkenlerin toplamını ve her değişken adının kaç kez kullanıldığını ayrıntılı biçimde listeler. Bildirim değerlerinin başındaki ve sonundaki boşluklar otomatik olarak kırpılır. Parantez içinde yedek değer içeren `var()` kullanımları da adlarına göre doğru biçimde sayıma dahil edilir. Analizin çalışabilmesi için metin alanına geçerli CSS kodu girilmelidir; boş bırakılan girişler işlenmez. Stil şablonlarınızı temizlemek, kullanılmayan kod kalıntılarını ayıklamak ve tasarım sisteminizdeki renk veya tipografi değişkenlerini doğrulamak için stil kodunuzu doğrudan ekleyebilirsiniz.
Kullanım
- CSS metin alanına analiz etmek istediğiniz stil kurallarını veya değişken tanımlarını yapıştırın.
- Kodunuzda değişkenlerin `--degisken: deger;` formatında ve başvuruların `var(--degisken)` biçiminde yazıldığından emin olun.
- Çalıştır butonuna tıklayarak CSS içeriğini çözümleyin.
- Sonuç alanında listelenen toplam bildirimleri, referans sayılarını ve kullanılmayan değişkenleri inceleyin.
Örnekler
- :root { --primary-color: #007bff; --spacing-unit: 8px; } .button { background-color: var(--primary-color); padding: var(--spacing-unit); }
- :root { --font-base: 16px; --unused-color: #ff0000; } body { font-size: var(--font-base); }
SSS
Araç hangi CSS değişken sözdizimini destekler?
İki tire ile başlayan (`--isim: deger;`) özel özellik bildirimlerini ve `var(--isim)` biçimindeki referans çağrılarını tanır.
Kullanılmayan değişkenler nasıl tespit edilir?
Bildirimi yapılmış ancak metin içinde hiçbir `var()` çağrısıyla eşleşmeyen özel özellikler kullanılmayan değişken olarak listelenir.
Yedek değer içeren var() çağrıları sayılır mı?
Evet, `var(--renk, #000)` gibi yedek parametre içeren çağrılarda değişken adı tanınır ve referans sayımına eklenir.
Girdi alanı boş bırakıldığında ne olur?
Analiz gerçekleştirilmez. İşlemin başlaması için en az bir CSS kuralı veya değişken bildirimi girilmelidir.