在线CSS变量提取器

CSS变量提取器能做什么？

CSS变量提取器是一款纯前端在线工具，用于从CSS代码中提取所有自定义属性（CSS Custom Properties，即以--开头的变量）。工具自动解析CSS代码，识别变量定义和引用，按颜色、间距、字体、边框等类别自动分组，检测未使用的变量，并支持导出为CSS自定义属性、SCSS变量、JSON设计Token和Tailwind配置等多种格式。所有解析在浏览器本地完成，代码绝不上传服务器。

核心功能

• 智能提取：自动识别所有--变量名定义，包括:root、body和任意选择器中的变量
• 自动分组：按颜色、间距、字体、边框、阴影、动画等类别智能归类变量
• 未使用检测：对比var()引用，标记仅定义未使用的冗余变量
• 颜色预览：自动识别颜色值变量，显示色块预览
• 多格式导出：CSS自定义属性、SCSS变量、JSON设计Token、Tailwind配置

使用教程

步骤1：在输入框粘贴CSS代码，或拖拽.css文件上传，或点击"加载示例"。

步骤2：点击"提取变量"或使用Ctrl+Enter快捷键，工具自动解析并展示所有变量。

步骤3：查看按类别分组的变量列表，颜色变量带色块预览，未使用变量标红。

步骤4：选择导出格式（CSS/SCSS/JSON/Tailwind），点击"复制"或"下载"保存结果。

应用场景

设计系统构建

从现有CSS中提取设计Token，建立统一的设计变量体系，确保设计一致性。

代码审计

发现未使用的CSS变量，清理冗余代码，减小CSS文件体积。

技术迁移

将CSS自定义属性迁移为SCSS变量或Tailwind配置，适配不同技术栈。

主题开发

提取所有颜色和间距变量，快速创建暗色/亮色主题变体。

扩展知识

CSS自定义属性（Custom Properties）以--开头，通过var(--name)引用。与预处理器变量不同，CSS自定义属性是运行时变量，支持级联、继承和JavaScript动态修改。命名约定推荐--category-property-variant格式，如--color-primary-500、--spacing-md。设计Token是将设计决策抽象为可复用变量的实践，CSS自定义属性是实现设计Token的原生Web标准。

常见问题 (FAQ)