CSS变量生成器
使用可视化编辑器创建CSS自定义属性（变量）。使用颜色选择器和预设生成:root块。
1 个变量
关于此工具
CSS自定义属性（CSS变量）是可以在整个样式表中重复使用的值。与其在CSS中硬编码颜色、大小等值，不如在:root块中将它们定义为变量，然后使用var(--name)语法引用它们。这样可以轻松在整个项目中保持一致的设计令牌，并简化全局主题更改——只需更新变量值，更改就会应用到使用它的每个地方。
使用此CSS变量生成器，您可以在不手动编写代码的情况下直观地创建和组织自定义属性。逐个添加变量，从暗色模式、浅色模式或品牌颜色等预设主题模板中选择，然后指定每个变量的名称、类型（颜色、大小、数字或字符串）和值。该工具会自动将输出格式化为有效的:root CSS块，并包含内联注释，说明如何在样式中使用每个变量。生成后，可以直接将CSS复制到剪贴板或将其下载为文件。
此工具特别适用于设计系统的创建、多品牌主题的维护或一致的间距和排版比例的管理。无论是构建小型网站还是大型组件库，拥有集中管理的CSS变量集合都能减少代码重复，使设计更新更快、更可靠。
常见问题
代码实现
# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
lines = [":root {"]
for name, value in variables.items():
var_name = name if name.startswith("--") else f"--{name}"
lines.append(f" {var_name}: {value};")
lines.append("}")
return "\n".join(lines)
# Example: dark mode theme
dark_theme = {
"--bg-primary": "#0f0f0f",
"--bg-secondary": "#1a1a1a",
"--text-primary": "#ffffff",
"--text-secondary": "#a0a0a0",
"--accent": "#6366f1",
"--border-radius": "8px",
"--font-size-base": "16px",
}
print(generate_css_variables(dark_theme))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.