Ekstraktor Properti CSS Kustom

Ekstraktor Properti CSS Kustom

Tempelkan CSS atau SCSS stylesheet Anda dan segera dapatkan daftar bersih, terurut, dan tidak duplikat dari setiap --custom-property yang dideklarasikan di dalamnya — bersama dengan cakupan pilihan di mana ia dideklarasikan. Pengambilan juga mengungkapkan variabel yang direferensikan melalui var(--name) tetapi tidak pernah dideklarasikan di mana pun, yang merupakan penyebab umum dari gaya yang rusak dalam sistem desain besar.

Cara Penggunaan

1. Tempel stylesheet Anda ke dalam Masukan CSS / SCSS box (atau klik Coba contoh ini untuk memuat contoh).
2. Pilih sebuah Format Keluaranfield untuk menampilkan tabel teks sederhana, objek JSON, atau blok siap ditempelkan :root { } blok.
3. Gunakan Filtrasi field untuk membatasi hasil berdasarkan nama variabel, nilai, atau cakupan.
4. Beralih Sertakan cakupan pilihan untuk mengontrol apakah tabel menampilkan tempat setiap variabel dideklarasikan.
5. Uraikan Variabel Tidak Didefinisikan panel untuk referensi yang tidak memiliki deklarasi yang sesuai. var(--name) Salin atau unduh daftar yang ditarik dengan tombol di panel hasil.
6. Parser yang menyadari tanda kurung

Fitur

• – melintasi stylesheet karakter per karakter sehingga dapat menangani pilihan yang terkandung, kueri media, dan nilai yang dikutip dengan benar. Pemantauan cakupan
• – setiap variabel dipasangkan dengan pilihan atau at-rule di mana ia dideklarasikan, sehingga Anda dapat membedakan token dari penggantian yang berlaku pada komponen. – tabel teks sederhana untuk tinjauan, objek JSON untuk penggunaan programatis, dan blok bersih yang dapat ditempelkan kembali ke stylesheet. :root Deteksi variabel tidak didefinisikan
• Tiga format output – menandai setiap :root { } yang tidak memiliki deklarasi yang sesuai di mana pun dalam input.
• Filtrasi langsung – ketik untuk membatasi hasil berdasarkan nama variabel, nilai, atau cakupan pilihan secara real-time. var(--name) Penghapusan duplikat dan pengurutan
• – deklarasi duplikat dalam cakupan yang sama dikompres dan daftar diurutkan secara alfabetis untuk memudahkan pemeriksaan. – tidak ada yang diunggah; bekerja pada stylesheet pribadi dan yang belum selesai.
• Audit stylesheet sistem desain untuk membuat daftar master token. Mengonversi variabel SCSS ke properti CSS bawaan.
• Berjalan sepenuhnya di browser Anda Mencari gaya yang rusak yang disebabkan oleh referensi yang salah ketik.

Kapan Menggunakan Alat Ini

• Menghasilkan blok awal
• dari tema pihak ketiga.
• Mengunggah token sebagai JSON untuk digunakan di situs dokumentasi atau entri Storybook. var() Apa itu properti CSS bawaan?
• Properti CSS bawaan (juga disebut variabel CSS) adalah identifikasi yang didefinisikan oleh pengguna yang diawali dengan dua garis miring (misalnya, --color-primary) yang nilai dapat digunakan di mana saja dalam stylesheet melalui fungsi var(). Berbeda dengan variabel preprocessor, properti bawaan di-resolusi saat runtime oleh browser, yang berarti mereka menyebar dan diwariskan seperti properti CSS lainnya dan dapat diperbarui secara dinamis dengan JavaScript. :root { } Bagaimana cakupan pilihan memengaruhi properti CSS bawaan?
• Properti bawaan hanya ada dalam subpohon elemen yang mendeklarasikannya. Mendeklarasikannya pada :root membuatnya secara efektif global karena :root cocok dengan elemen html, sementara mendeklarasikannya di dalam pilihan komponen seperti .card membatasi nilai tersebut hanya untuk komponen tersebut dan turunannya. Nama yang sama dapat memiliki nilai yang berbeda dalam cakupan yang berbeda, yang merupakan mekanisme di balik theming, pengaturan mode gelap, dan penggantian pada tingkat komponen.