设计令牌转换器
在 JSON、CSS 变量和 SCSS 格式之间转换设计令牌。
关于此工具
设计令牌是现代设计系统的基础，是用于颜色、间距、排版、阴影及其他视觉属性的标准化值。将这些决策集中在单一格式中，团队可以保持视觉一致性、减少错误并加速设计和开发工作流。无论您是在单个产品上工作还是管理多个平台，设计令牌都能消除在整个代码库中手动追踪颜色或尺寸的需求。
此转换器让您可以轻松在最常见的设计令牌格式之间切换：JSON（将令牌存储为简单的键值结构）、CSS 变量（通过 :root 选择器在浏览器中原生呈现）和 SCSS 变量（需要构建步骤，但与 Sass 预处理器无缝集成）。只需粘贴任何格式的令牌并选择目标格式，工具会自动检测输入并生成可直接复制粘贴到项目中的整洁输出。
使用设计令牌的团队通常以 JSON 作为源格式开始，然后为平台生成特定输出：需要原生浏览器支持的网络应用程序用 CSS、使用 Sass 构建的项目用 SCSS、以编程方式使用令牌的工具用 JSON。此工具支持双向转换，因此当您需要审计或重构设计系统时，可以从现有 CSS 或 SCSS 提取令牌并将其转换回 JSON。
常见问题
代码实现
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.