Pemindai Properti Custom CSS
Ekstrak setiap properti custom CSS (--variable) yang dideklarasikan dalam stylesheet, beserta nilai yang dideklarasikan dan berapa kali direferensikan melalui var() — berguna untuk audit design system dan menemukan variabel yang tidak digunakan.
Input
Output
| Nama Properti | Nilai Dideklarasikan | Jumlah Penggunaan |
|---|---|---|
| No data yet | ||
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-custom-property-extractor \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": ":root {\n --primary-color: #464aff;\n --spacing:…"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-custom-property-extractor` tool (CSS Custom Property Extractor) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-custom-property-extractor/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pemindai Properti Custom CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu properti custom CSS?
Properti custom CSS — biasa disebut variabel CSS — adalah nilai yang dideklarasikan dengan awalan -- (--primary-color: #464aff;) dan digunakan di tempat lain dengan var(--primary-color). Mereka memberdayakan design tokens untuk palet warna, skala spacing, tipografi dan theming (termasuk override mode gelap prefers-color-scheme), memungkinkan satu deklarasi memperbarui setiap tempat di mana ia direferensikan.
Fleksibilitas ini memiliki biaya: saat stylesheet berkembang, menjadi sulit untuk menjawab pertanyaan sederhana hanya dengan membaca sumbernya — variabel mana yang benar-benar ada, nilai apa yang kami tetapkan, dan apakah siapa pun masih menggunakan yang ini? Alat ini menjawab ketiganya sekilas.
Apa yang alat ini lakukan
Tempel (atau unggah) file CSS atau SCSS dan alat akan memindainya untuk:
- Deklarasi — setiap pasangan
--property-name: value;, dalam urutan kemunculannya pertama kali. - Penggunaan — setiap referensi
var(--property-name), dihitung per properti.
Hasilnya adalah tabel setiap properti custom dengan nama, nilai yang dideklarasikan, dan berapa kali digunakan melalui var() — ditambah ringkasan satu baris dari totalnya. Properti yang dideklarasikan tetapi tidak pernah direferensikan (jumlah penggunaan 0) adalah indikasi kuat bahwa itu adalah beban kerja mati yang aman untuk dihapus.
Mengapa mengekstrak dan mengaudit properti custom?
- Audit design system. Konfirmasi daftar token Anda cocok dengan spesifikasi desain Anda, dan tangkap warna satu kali atau nilai spacing yang masuk tanpa sistem token.
- Deteksi variabel mati. Jumlah penggunaan
0menandai variabel yang tidak direferensikan siapa pun lagi — berguna sebelum pass pembersihan atau dorongan ukuran bundle CSS. - Onboarding dan dokumentasi. Buat referensi cepat setiap token yang didefinisikan codebase, tanpa memburu blok
:rootdengan tangan. - Pemeriksaan keselamatan refactor. Sebelum mengganti nama atau menghapus variabel, lihat persis berapa banyak tempat yang mereferensikannya.
Cara menggunakannya
- Tempel CSS atau SCSS Anda ke dalam kotak input, atau lepaskan file
.css/.scsske pengupload. - Tabel diperbarui secara otomatis saat Anda mengetik — tidak ada tombol untuk diklik.
- Salin atau unduh hasil sebagai CSV untuk dokumen audit design system atau tiket pembersihan.
FAQ
Apakah ini memahami $variables SCSS atau nesting?
Tidak — hanya mencocokkan properti custom CSS asli (sintaks --name). Variabel Sass ($name) dan fitur preprocessor CSS tidak diuraikan, karena dikompilasi sebelum mencapai browser.
Apakah ini melacak selector mana properti dideklarasikan atau digunakan?
Tidak — ini adalah pemindaian datar di seluruh stylesheet. Properti yang dideklarasikan ulang dalam blok @media untuk mode gelap masih satu baris (nilai terakhir yang dideklarasikan menang), dan penggunaan di dalam aturan apa pun diperhitungkan dalam total properti itu.
Apakah nilai fallback dihitung, seperti var(--gap, 8px)?
Ya — argumen fallback tidak menghentikan penggunaan dari dihitung sebagai referensi ke --gap.
Privasi
Semuanya berjalan secara lokal di browser Anda. CSS Anda tidak pernah diunggah atau disimpan di mana pun.