CSS Variable Extractor
Extract all custom CSS variables defined inside stylesheets into a list
Locates variable declarations (--var: value) in CSS sheets to list parameters.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Paste the stylesheet code.
- Click extract to list variable names and values.
- Click copy to obtain the var() declaration.
FAQ
- Does it parse nested rules?
- Yes, it extracts variables wherever they are declared in selectors.
- Are variables declared inside a specific class like .dark-mode, rather than :root, also extracted?
- Yes — the tool looks for the -- custom property declaration pattern anywhere, not just inside :root, so theme variables defined inside a class like .dark-mode or a selector like [data-theme="dark"] are picked up too. Since the list doesn't track which selector each one came from, a variable with the same name declared under multiple selectors with different values may show up more than once.
- Are variables declared inside a specific class like .dark-mode, rather than :root, also extracted?
- Yes — the tool looks for the -- custom property declaration pattern anywhere, not just inside :root, so theme variables defined inside a class like .dark-mode or a selector like [data-theme="dark"] are picked up too. Since the list doesn't track which selector each one came from, a variable with the same name declared under multiple selectors with different values may show up more than once.