CSS 变量管理器
在线管理 CSS 自定义属性，支持导入、预览、多格式导出
变量列表 (15)
| 变量名 | 值 | 类型 | 分类 | 操作 |
|---|---|---|---|---|
实时预览
示例卡片标题
这是一段示例文本，展示排版变量效果。调整左侧变量值可实时预览变化。
导出代码
:root {
--primary: #007bff;
--primary-contrast: #ffffff;
--secondary: #6c757d;
--text-color: #333333;
--text-secondary: #666666;
--bg-color: #ffffff;
--btn-padding: 8px 16px;
--input-padding: 8px 12px;
--font-family: system-ui, sans-serif;
--font-size: 16px;
--line-height: 1.6;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--radius: 4px;
--border-color: #ced4da;
}CSS 变量管理器使用说明
主要功能
- 变量管理 - 添加、编辑、删除 CSS 自定义属性
- 分类管理 - 颜色、间距、排版、阴影、边框五大类
- 实时预览 - 在示例组件上实时查看变量效果
- 主题切换 - 支持亮色/暗色主题变量
- 多格式导出 - CSS :root、SCSS、Tailwind、JSON
- 导入解析 - 从现有 CSS 中导入变量
使用场景
- 设计系统 / Design Token 管理
- 网站主题变量统一配置
- 快速生成 Tailwind 配置
- 团队协作中变量标准化
- 多主题方案切换预览