CSS 自定义属性提取器
提取样式表中声明的每个 CSS 自定义属性 (--variable)，以及其声明值和通过 var() 的引用次数 — 对设计系统审计和发现未使用的变量很有用。
输入
输出
| 属性名称 | 声明的值 | 使用次数 |
|---|---|---|
| No data yet | ||
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-custom-property-extractor \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": ":root {\n --primary-color: #464aff;\n --spacing:…"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-custom-property-extractor` tool (CSS Custom Property Extractor) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-custom-property-extractor/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 自定义属性提取器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是 CSS 自定义属性?
CSS 自定义属性 — 通常称为 CSS 变量 — 是使用 -- 前缀声明的值(--primary-color: #464aff;)，并使用 var(--primary-color) 在其他地方使用。它们为颜色调色板、间距比例、排版和主题(包括 prefers-color-scheme 深色模式覆盖)提供 设计令牌，允许单个声明更新引用它的每个地方。
这种灵活性是有代价的: 随着样式表的增长，仅通过阅读源代码很难回答简单问题 — 哪些变量实际存在、我们选择了什么值，以及是否有人还在使用这个? 此工具一眼就能回答全部三个问题。
此工具做什么
粘贴(或上传) CSS 或 SCSS 文件，工具将扫描它:
- 声明 — 每个
--property-name: value;对，按首次出现的顺序。 - 使用 — 每个
var(--property-name)引用，按属性计数。
结果是一个表格，显示每个自定义属性的名称、其声明的值以及通过 var() 使用的次数 — 加上总数的单行摘要。声明但从未引用的属性(使用次数为 0)是强烈表明它是已死亡且安全删除的代码的指标。
为什么要提取和审计自定义属性?
- 设计系统审计。 确认您的令牌列表与设计规范相匹配，并捕获在令牌系统之外潜入的一次性颜色或间距值。
- 未使用变量检测。 使用次数
0标记没有人再引用的变量 — 在清理过程或 CSS 包大小削减之前很有用。 - 入职和文档。 生成代码库定义的每个令牌的快速参考，而无需手动搜索
:root块。 - 重构安全检查。 在重命名或删除变量之前，查看确切有多少地方引用了它。
如何使用
- 将 CSS 或 SCSS 粘贴到输入框中，或将
.css/.scss文件拖到上传器上。 - 输入时表格会自动更新 — 无需点击任何按钮。
- 将结果复制或下载为 CSV，用于设计系统审计文档或清理工单。
FAQ
它能理解 SCSS 的 $variables 或嵌套吗?
不能 — 它只匹配原生 CSS 自定义属性(--name 语法)。Sass 变量($name)和 CSS 预处理器功能不被解析，因为它们在到达浏览器之前已被编译。
它是否跟踪属性在哪个选择器中被声明或使用?
不能 — 这是一个平面、全样式表的扫描。在 @media 块中为深色模式重新声明的属性仍然是一行(最后声明的值获胜)，任何规则内的使用都计入该属性的总数。
回退值是否计数，例如 var(--gap, 8px)?
是的 — 回退参数不会阻止使用被计为对 --gap 的引用。
隐私
一切都在您的浏览器中本地运行。您的 CSS 永远不会被上传或存储在任何地方。