运行工具
本工具用于解析与分析样式表中的 CSS 自定义属性（CSS 变量）。在输入框中粘贴包含 CSS 样式的文本后，工具会自动扫描以双连字符开头的变量声明（如 --primary-color: #333;），提取变量名与对应的值并去除首尾空白。同时，工具会检索所有 var(--variable-name) 形式的引用，精确统计每个变量在样式表中出现的次数。分析完成后，界面将清晰列出已提取的所有自定义属性声明、声明总数、每个变量的引用频次，以及未在任何 var() 中被引用的变量列表。这一功能可以帮助开发者审查样式代码、排查冗余或拼写错误的变量名，并优化前端项目的样式结构。若输入框内容为空，工具将提示输入有效样式代码。
使用说明
- 在“CSS 样式代码”文本框中输入或粘贴包含 CSS 变量声明与引用的样式文本。
- 点击运行按钮开始解析。
- 在结果面板中查看提取出的自定义属性列表、各变量被 var() 引用的次数及未引用变量汇总。
示例
- 分析基础主题变量：输入 :root { --main-bg: #fff; --text-color: #333; } body { background: var(--main-bg); }，提取出 2 个变量声明，统计显示 --main-bg 引用 1 次，--text-color 引用 0 次（标为未引用）。
- 排查冗余变量：输入包含多个组件样式的代码片段，工具自动列出所有已声明但未在任何 var() 中调用的变量，方便清理无用代码。
常见问题
该工具支持识别哪些格式的 CSS 变量？
工具能够识别以双连字符开头并以分号结尾的标准自定义属性声明（例如 --primary-color: #007bff;），以及以 var(--name) 格式调用的变量引用。
如果变量声明中包含回退值（fallback），是否会影响引用统计？
不会。工具能够识别包含备用值的 var() 调用（例如 var(--theme, #fff)），并正确计入对应变量名的引用次数。
输入内容为空时会发生什么？
如果未输入任何 CSS 文本，工具无法提取变量，界面会提示您输入有效的样式代码。