🎨 CSS变量生成器

使用教程

本CSS变量生成器旨在帮助前端开发者快速构建和管理设计令牌系统，以下是详细使用步骤：

添加变量：在「变量管理」区域，先选择变量类型（颜色、尺寸、字体或文本），然后输入变量名和变量值。变量名不需要加--前缀，工具会自动添加。选择「颜色」类型时会显示颜色选择器，可点击色块直接选色，也可手动输入十六进制或RGB值。按回车键可快速添加。

编辑与删除：添加的变量会显示在列表中，可直接点击值输入框进行编辑，修改后预览和代码会实时更新。点击变量右侧的「删除」按钮可移除该变量。所有操作即时生效，无需保存按钮。

实时预览：页面顶部的预览区域展示了一组典型UI组件（卡片、按钮、标签），它们的所有样式属性都引用了你定义的CSS变量。修改变量值时，预览会立即反映变化，让你直观感受设计令牌对整体视觉的影响。

预设主题：工具内置8套精心设计的主题预设，涵盖现代蓝紫、暖色系、森林绿、暗色主题、极简灰白、赛博朋克、柔和粉彩和Material Design风格。点击任意预设即可一键加载完整的变量集，适合快速启动新项目或作为设计参考。

代码导出：设计完成后，在「CSS代码输出」区域查看生成的:root变量代码。支持三种格式：纯CSS（:root{--var:value}）、SCSS（$var: value）和JSON格式（便于跨平台使用）。点击「复制」按钮即可一键复制到剪贴板。还支持导出/导入JSON文件，方便团队共享设计令牌。

应用场景

CSS变量和设计令牌在现代前端开发中有着广泛的应用场景：

主题系统与暗色模式：这是CSS变量最经典的应用。在:root中定义亮色主题变量，在[data-theme="dark"]选择器中覆盖同名变量值。由于所有组件样式都通过var()引用变量，切换主题只需修改变量定义，无需改写任何组件样式。配合prefers-color-scheme媒体查询，还能自动跟随系统暗色模式。

设计系统一致性：大型项目往往有数十个页面和组件，手动维护颜色和间距的一致性极其困难。通过设计令牌系统，团队共享同一套变量定义——主色、辅色、文字色、背景色、间距、圆角、阴影等——确保整个产品的视觉语言统一。修改变量值即可全局更新，大大降低了维护成本。

多品牌/白标定制：对于SaaS产品或白标解决方案，不同客户需要不同的品牌色和主题。使用CSS变量，只需为每个客户准备一套变量覆盖值，在运行时动态加载即可实现品牌定制，无需编译多份CSS文件。这是传统预处理器变量无法实现的运行时动态切换。

响应式设计令牌：CSS变量支持在媒体查询中重新赋值，这意味着可以为不同屏幕尺寸定义不同的设计令牌。例如在移动端使用较小的间距和字号，在桌面端使用更大的值。这种响应式令牌系统让组件自适应变得优雅而简洁。

扩展知识

CSS变量的继承与层叠：CSS变量遵循标准的继承和层叠规则。在:root（即html元素）上定义的变量是全局的，所有元素都能继承。你也可以在特定元素上重新定义变量，只影响该元素及其子元素。这种局部覆盖能力非常强大，可以实现嵌套主题、组件级定制等高级效果。

var()函数的fallback值：var()函数支持第二个参数作为后备值，语法为var(--name, fallback)。当变量未定义时使用后备值，这在渐进增强和第三方组件集成中非常有用。还可以嵌套使用：var(--brand, var(--primary, blue))。

设计令牌的层级架构：成熟的设计系统通常采用三层令牌架构：原始令牌（如--blue-500）、语义令牌（如--color-primary引用--blue-500）、组件令牌（如--button-bg引用--color-primary）。这种分层设计让全局品牌调整和组件级定制互不干扰。

与Style Dictionary集成：Style Dictionary是Amazon开源的设计令牌管理工具，可以将一份JSON令牌定义编译为CSS变量、SCSS变量、iOS Swift、Android XML等多种平台格式。本工具导出的JSON格式可直接作为Style Dictionary的输入，实现跨平台设计令牌同步。