🎨 CSS变量整理器

CSS变量整理器能做什么？

CSS变量整理器是一款免费在线开发者工具，从CSS代码中提取所有自定义属性（CSS变量），按类别自动分组（颜色、间距、字体、布局等），生成优化后的变量声明。支持颜色预览、变量统计和一键导出。适用于CSS代码重构、设计系统整理和变量命名规范化。所有处理在浏览器本地完成，数据绝不上传服务器。

核心功能

• 变量提取：从CSS代码中提取所有--开头的自定义属性
• 自动分类：按颜色、间距、字体、布局等类别自动分组
• 颜色预览：颜色值变量显示色块预览
• 变量统计：统计各类别变量数量和总变量数
• 优化输出：生成按类别排序的:root变量声明

使用教程

1. 粘贴CSS代码到输入框。

2. 点击"提取变量"或直接输入自动解析。

3. 查看变量分类和统计信息。

4. 复制或下载优化后的CSS变量声明。

应用场景

场景1：设计系统整理

将散落在各处的CSS变量集中到:root，建立统一的设计令牌系统。

场景2：CSS重构

提取硬编码的颜色值和尺寸为变量，提高代码可维护性。

场景3：主题切换

整理变量后方便创建多套主题变量，实现深色/浅色主题切换。

扩展知识

CSS自定义属性（CSS Variables）以--开头定义，用var()函数引用。与预处理器变量不同，CSS变量是运行时的，可以通过JavaScript动态修改，支持继承和回退值。命名最佳实践：使用语义化名称（如--color-primary而非--blue-500），按类别前缀分组（如--spacing-sm、--font-size-lg），避免使用具体值作为名称。