如何分析 CSS 自定义属性的声明、引用与未引用项

先了解它能分析什么

CSS 自定义属性常用于集中管理颜色、间距等值。使用 CSS Variables 时，可以提交一段 CSS 文本，让工具识别其中的自定义属性声明和 var(--名称) 引用，并查看哪些已识别的声明没有对应引用。它适合在整理样式变量、检查变量使用情况时作为快速分析步骤。

操作步骤：提交 CSS 并检查变量引用

1. 在输入区域粘贴 CSS 文本，例如包含 --主题色: #1677ff; 这类自定义属性声明，以及使用它的 var(--主题色) 引用。输入应包含实际文本；如果选中的输入为空，处理会返回失败结果。

2. 如果界面同时提供两个兼容的文本输入位置，并且你在两处都填入内容，优先使用非空的文本输入。通常只需将待分析的 CSS 放入主要文本输入区域即可。

3. 提交文本并等待结果。工具会识别名称以两个连字符开头、后续由单词字符或连字符组成，并以冒号、值和分号结束的自定义属性声明；提取的值会去除首尾空白。

4. 查看引用统计。工具识别以 var(--名称) 开头的引用，并按名称计数；引用括号中存在可选内容时，也会纳入这类引用的识别范围。

5. 对照结果中的声明列表、声明总数、未引用声明总数和按名称统计的引用次数，定位没有匹配引用的声明，再回到 CSS 文本中决定是否保留、改名或补充使用位置。

如何读取结果

结果中的声明列表表示工具识别到的自定义属性，不等同于 CSS 文件中的全部属性。引用次数按识别到的变量名称分别统计；某个声明名称没有对应的已识别引用时，会进入未引用声明结果。若输入包含注释、格式变体或其他未符合识别模式的内容，相关部分可能不会进入分析，因此应把结果作为整理线索，而不是 CSS 标准校验或语义判断。

例如，你提交一段包含 --brand-color 和 --gap-size 两个声明、并在规则中使用 var(--brand-color) 的 CSS 文本。结果形状会包括已识别声明及其整理后的值、声明数量、未引用声明数量，以及按变量名称记录的引用次数；其中 --gap-size 是否出现在未引用列表，可根据该段文本中是否存在匹配引用来核对。

使用示例

你正在整理一份使用品牌色和间距变量的样式表，并想确认两个声明中哪些已有对应引用。

提交包含 --brand-color、--gap-size 两个声明，并在规则中使用 var(--brand-color) 的 CSS 文本，然后查看分析结果中的声明列表、统计项和引用计数。

结果包含已识别声明及其整理后的值、声明总数、未引用声明总数，以及按变量名称统计的引用次数。

使用限制

• 分析范围限于工具能识别的声明和引用模式，不能替代完整 CSS 解析、标准校验或变量语义分析。

常见错误

• 如果提交后得到失败结果，先检查选中的 CSS 输入是否为空，再粘贴实际 CSS 文本并重新提交。

常见问题

输入为空时会怎样？

如果选中的 CSS 输入为空，工具会返回失败结果；请先粘贴待分析的 CSS 文本。

同时提供两处输入时使用哪一处？

如果两个支持的输入位置同时有内容，非空的文本输入会优先于另一个 CSS 输入；只使用主要文本输入通常更直接。

工具会解析 CSS 变量的最终值吗？

结果只统计符合识别模式的 var(--名称) 引用，并按名称记录次数；它不会据此表示变量值已经解析或回退行为已经评估。