概述
CSS 变量迁移工作流是一个初级难度的工作流。将硬编码 CSS 值迁移到自定义属性，实现一致主题和更易维护。该工作流的目标是：Replace hardcoded colors, spacing, and fonts with CSS custom properties for theme support.
环境准备
执行本工作流需要以下环境：A project with CSS files containing hardcoded values；A design token file or variables file；CSS custom property browser support。请确保在开始前准备好所有必需的工具和资源，以避免中途因环境问题中断。
执行步骤
本工作流包含4个步骤。步骤1：Identify hardcoded values——Search CSS files for hardcoded colors, font sizes, and spacing values. 步骤2：Create variables——Define CSS custom properties in a :root block for each unique value. 步骤3：Replace usages——Replace each hardcoded value in the CSS with the corresponding var() reference. 步骤4：Verify visually——Open the application and confirm that the visual appearance is unchanged.
验证与清理
预期结果：All hardcoded CSS values are replaced with custom properties, and the visual appearance is unchanged.。验证方法：Compare screenshots before and after migration to confirm no visual regressions.。清理操作：No cleanup needed; the variables file should be committed.。estimatedMinutes 为 30 分钟。
代码示例
:root { --color-primary: #0066cc; --spacing-unit: 8px; }
.button { color: var(--color-primary); padding: var(--spacing-unit); }