LOCAL CSS TOKEN AUDIT

CSS 变量与 Design Token 提取器

用浏览器 CSSOM 解析自定义属性，查看每个 Token 的作用域、媒体条件、类型、重复覆盖和 var() 引用，并导出可继续整理的 CSS、JSON 与 CSV。

CSS 输入

最大 5 MB；@import 不会联网加载。

手动输入 · 0 字符
声明0
唯一变量0
重复0
引用0
未解析0
颜色0

等待 CSS

上传样式文件或载入示例。解析只读取 CSS 规则，不会执行脚本或请求 @import。

整理后的 :root CSS

提取变量后生成结果。

Design Token JSON

提取变量后生成结果。

全部声明 CSV

提取变量后生成结果。

粘贴 CSS、上传 .css 文件，或载入示例开始提取。

最后定义不一定是错误

CSS 级联允许同名变量在 :root、组件、主题和媒体查询中覆盖。审计重点不是机械去重，而是确认覆盖是否出现在预期作用域和条件里。

JSON 不是自动标准化

导出的 JSON 保留值、类型和来源线索，便于继续迁移；命名层级、别名、复合阴影和字体 Token 仍要按团队采用的 W3C、Tokens Studio 或平台格式整理。

未解析变量也可能合理

变量可能由宿主应用、另一个 CSS 文件或运行时注入。工具只分析当前输入，不会抓取 @import，因此缺失项是排查线索，不等于页面一定报错。

RELATED TOOLS

接着处理

查看全部工具 →
颜色转换继续核对提取出的品牌色和颜色格式。颜色对比度检查文字 Token 与背景 Token 的可读性。CSS 压缩Token 整理完成后压缩生产样式。HTML 在线预览把导出的变量放入组件示例中测试。

USE & REVIEW

CSS 变量与 Design Token 提取器常见问题

查看全部工具指南 →

CSS 文件会上传服务器或加载 @import 吗？

不会。文件读取、CSSOM 解析、变量统计和 CSS/JSON/CSV 生成都在当前浏览器完成。@import 不会发起网络请求，因此被导入文件中的变量不会出现在结果里；需要一起审计时应把相关 CSS 内容合并后输入。

同一个 CSS 变量多次定义是否一定是错误？

不一定。CSS 级联允许在 :root、组件、主题、媒体查询和容器条件中覆盖同名变量。工具把它标为重复，是为了让你比较选择器和条件；删除前要确认它不是有意的深色主题、断点或局部组件覆盖。

未解析的 var(--name) 引用代表什么？

它表示当前输入使用了该变量，但解析到的规则里没有声明。变量可能确实拼错或遗漏，也可能来自另一个样式文件、宿主应用、Shadow DOM 或运行时注入。工具只分析当前输入，未解析项是排查线索，不是自动报错结论。

为什么工具使用 CSSOM，而不是正则表达式提取 --变量？

CSSOM 会按浏览器理解的规则结构处理选择器、声明、媒体查询和嵌套分组，避免注释、字符串和复杂值被简单正则误判。无效或浏览器不支持的语法可能被忽略，因此仍要结合项目构建器与目标浏览器检查。

导出的 Design Token JSON 可以直接导入 Figma 或 Tokens Studio 吗？

它采用清晰的 $value、$type 和来源扩展结构，适合继续整理，但不同平台对层级命名、别名、复合阴影、字体和颜色格式要求不同。正式导入前应按目标平台 schema 调整并用小样本验证。

“每个变量只看最后定义”适合直接生成生产 CSS 吗？

它适合快速查看级联后的最后一个声明，但会丢失主题、媒体查询和局部选择器覆盖的上下文。整理后的 :root CSS 只是迁移草稿；不要把它直接替换原样式，除非已经确认所有覆盖都应合并为全局变量。