Lompat ke konten
Aback Tools Logo

Ekstraktor Variabel CSS

Ekstrak semua properti kustom CSS dari stylesheet mana pun secara online dan gratis dengan ekstraktor variabel CSS kami. Temukan setiap deklarasi --variabel secara instan, filter berdasarkan cakupan selektor, urutkan secara alfabetis, dan ekspor sebagai CSS, JSON, TypeScript, SCSS, atau Markdown. Tanpa registrasi.

CSS Variable Extractor

Paste your CSS stylesheet and click Extract. The tool finds every --custom-property declaration, groups them by selector, and exports them in your chosen format - CSS block, JSON, JavaScript object, TypeScript const, SCSS map, or Markdown table. All extraction runs locally in your browser.

Output Format Guide
CSS block: Ready to paste into a stylesheet
JSON: For design token pipelines and tooling
TypeScript: Type-safe variable references in code
SCSS map: For SCSS-based design systems
Markdown table: For documentation and style guides
Scope filter: Extract only :root or component-level vars

Mengapa menggunakan ekstraktor variabel CSS kami?

  • Ekstraksi variabel CSS instan: ekstraktor variabel CSS kami memindai seluruh stylesheet Anda dan menemukan setiap deklarasi --custom-property dalam milidetik. Ekstrak variabel CSS dari stylesheet apa pun: design system, pustaka komponen, atau file tema: secara instan di browser Anda.
  • Ekstraktor variabel CSS online yang aman: semua ekstraksi variabel CSS berjalan sepenuhnya di browser Anda. Kode stylesheet Anda tidak pernah meninggalkan perangkat, menjamin privasi penuh saat Anda mengekstrak variabel CSS secara online.
  • Ekstraktor variabel CSS tanpa instalasi: gunakan ekstraktor variabel CSS kami langsung di browser apa pun tanpa unduhan, plugin, atau akun. Ekstrak properti kustom CSS dari perangkat apa pun: desktop, tablet, atau seluler: secara gratis.
  • 7 format ekspor untuk setiap alur kerja: ekstraktor variabel CSS kami mengekspor ke blok CSS :root, JSON, objek JavaScript, objek const TypeScript, map SCSS, daftar sederhana, dan tabel Markdown: mencakup pipeline design token, dokumentasi, dan alur kerja pembuatan kode.

Kasus penggunaan umum ekstraktor variabel CSS

  • Dokumentasi design token: tim design system menggunakan ekstraktor variabel CSS kami untuk menghasilkan tabel Markdown semua design token dari stylesheet mereka. Ekspor setiap variabel --color, --spacing, dan --font ke format siap dokumentasi secara instan.
  • Integrasi pipeline design token: engineer frontend menggunakan ekstraktor variabel CSS kami untuk mengekspor properti kustom CSS sebagai JSON agar dapat diintegrasikan dengan alat design token seperti Style Dictionary, Theo, atau pipeline build khusus.
  • Migrasi dan refactoring tema: developer yang bermigrasi antar framework CSS atau merombak file tema menggunakan ekstraktor variabel CSS kami untuk mengaudit semua properti kustom dalam stylesheet. Identifikasi setiap variabel, nilainya, dan selektor tempatnya berada.
  • Integrasi design system di TypeScript: developer TypeScript menggunakan ekstraktor variabel CSS kami untuk menghasilkan objek const bertipe aman dari variabel CSS mereka. Dapatkan autocomplete dan pemeriksaan tipe untuk nama properti kustom CSS di kode TypeScript Anda.
  • Konversi design system ke SCSS: tim yang mengonversi properti kustom CSS menjadi variabel SCSS menggunakan ekstraktor kami untuk menghasilkan map SCSS dari deklarasi :root mereka. Ekspor semua variabel CSS sebagai $map SCSS siap pakai di basis kode SCSS Anda.
  • Audit mode gelap dan tema: developer yang membangun tema mode gelap menggunakan ekstraktor variabel CSS kami untuk membandingkan variabel antar selektor. Filter berdasarkan :root vs [data-theme="dark"] untuk melihat persis variabel mana yang ditimpa di setiap tema.

Apa itu properti kustom CSS (variabel CSS)?

Properti kustom CSS (juga disebut variabel CSS) adalah entitas yang didefinisikan oleh penulis CSS yang berisi nilai tertentu untuk digunakan kembali di seluruh dokumen. Properti ini ditetapkan dengan awalan -- (misalnya, --color-primary: #3b82f6) dan diakses menggunakan fungsi var(). Properti kustom CSS didefinisikan di dalam selektor CSS (paling umum :root untuk cakupan global) dan mengalir secara cascade seperti properti CSS lainnya. Ekstraktor variabel CSS kami memindai seluruh stylesheet Anda dan menemukan setiap deklarasi properti kustom, terlepas dari selektor tempatnya muncul.

Cara kerja ekstraktor variabel CSS kami

  1. Tempel CSS Anda: masukkan stylesheet CSS apa pun: file design system lengkap, stylesheet komponen, atau file tema. Ekstraktor variabel CSS kami menerima CSS yang valid apa pun, termasuk stylesheet terminifikasi, aturan multi-selektor, dan deklarasi properti kustom bersarang.
  2. Ekstraksi instan di browser: klik Ekstrak Variabel dan alat ini memindai setiap baris untuk pola --properti: nilai, melacak selektor tempat setiap variabel berada, dan menerapkan filter cakupan serta pengurutan Anda. Semua pemrosesan berjalan lokal di browser Anda: CSS Anda tidak pernah meninggalkan perangkat.
  3. Salin atau unduh keluaran: variabel CSS yang diekstrak ditampilkan dalam format yang Anda pilih. Salin ke clipboard atau unduh sebagai file .css, .json, .ts, atau .scss.

Apa yang dihasilkan ekstraktor variabel CSS

  • Blok CSS :root: mengelompokkan variabel yang diekstrak berdasarkan selektor dan memformatnya sebagai blok CSS yang valid: siap ditempel langsung ke stylesheet atau file design token.
  • JSON / JavaScript / TypeScript: mengekspor variabel sebagai objek key-value untuk digunakan di pipeline design token, sistem theming JavaScript, atau basis kode TypeScript dengan referensi nama variabel bertipe aman.
  • Map SCSS: menghasilkan map SCSS $css-variables untuk digunakan di design system berbasis SCSS, memungkinkan akses programatik ke nilai variabel CSS dalam fungsi dan mixin SCSS.
  • Tabel Markdown: membuat tabel siap dokumentasi dengan kolom nama variabel, nilai, dan selektor: sempurna untuk panduan gaya, dokumentasi design system, dan referensi dalam peninjauan kode.

Pemfilteran cakupan dan opsi pengurutan

Filter cakupan memungkinkan Anda mengekstrak hanya variabel :root (design token global), hanya variabel non-:root (penimpaan di tingkat komponen), atau semua variabel dari seluruh stylesheet. Opsi pengurutan memungkinkan Anda mengurutkan variabel berdasarkan urutan sumber (seperti yang muncul di CSS), secara alfabetis berdasarkan nama, atau dikelompokkan berdasarkan selektor: memudahkan pengorganisasian design system besar dengan ratusan properti kustom.

Pertanyaan yang Sering Diajukan

Ekstraktor variabel CSS adalah alat yang memindai stylesheet CSS dan menemukan setiap deklarasi --custom-property, beserta nilainya dan selektor tempat deklarasi itu berada. Ekstraktor variabel CSS kami mendukung 7 format keluaran, termasuk blok CSS, JSON, TypeScript, map SCSS, dan tabel Markdown.

Properti kustom CSS adalah entitas yang didefinisikan dengan awalan -- (misalnya, --color-primary: #3b82f6) yang menyimpan nilai yang dapat digunakan kembali dalam stylesheet CSS. Properti ini diakses menggunakan fungsi var() dan mengalir secara cascade seperti properti CSS biasa.

Ya. Ekstraktor variabel CSS kami menemukan properti kustom di selektor CSS apa pun: :root, [data-theme="dark"], .component, dan lainnya. Gunakan filter cakupan untuk mengekstrak hanya variabel :root, hanya variabel non-:root, atau semua variabel.

Tentu. Semua ekstraksi variabel CSS berjalan sepenuhnya di browser Anda. Kode stylesheet Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah ditransmisikan ke server mana pun.

Ya: ekstraktor variabel CSS kami 100% gratis, tanpa registrasi, tanpa akun, tanpa paket premium, dan tanpa batas penggunaan.

Ekstraktor variabel CSS mendukung 7 format keluaran: blok CSS :root, daftar sederhana, objek JSON, map SCSS $map, objek JavaScript, objek const TypeScript (dengan ekspor tipe), dan tabel Markdown.

Bisa. Ekstraktor variabel CSS menangani CSS terminifikasi yang semua deklarasinya berada di satu baris. Ia menggunakan pencocokan pola untuk mengidentifikasi pola --properti: nilai terlepas dari spasi.

Keluaran TypeScript menghasilkan objek const dengan semua nama variabel CSS sebagai kunci dan nilainya sebagai string, plus alias tipe CSSVariableKey. Ini memberi Anda autocomplete dan pemeriksaan tipe untuk nama variabel CSS di TypeScript.

Ekstraktor variabel CSS memperlakukan setiap selektor sebagai cakupan terpisah. Jika --color-primary muncul di :root dan di [data-theme="dark"], kedua deklarasi diekstrak secara terpisah dengan selektornya masing-masing.