CSS自定义属性提取器
指导
CSS自定义属性提取器
粘贴任何CSS或SCSS样式表，即可立即获得一个干净、排序、去重的变量列表——包含其声明的选择器范围。提取器还会显示那些被引用但从未声明的变量，这些是大型设计系统中样式失效的常见原因。 --custom-property 声明在其中的变量——以及其声明的选择器范围。提取器还会显示那些被引用但从未声明的变量，这些是大型设计系统中样式失效的常见原因。 var(--name) 被引用但未声明的变量，这些是大型设计系统中样式失效的常见原因。
如何使用
- 将您的样式表粘贴到 CSS/SCSS 输入 框中（或点击 尝试一个示例 加载示例）。
- 选择一个 输出格式一个纯文本表格、一个JSON对象，或一个可直接粘贴的
:root { }块。 - 使用 筛选 字段以缩小结果，按变量名称、值或范围进行筛选。
- 切换 包含选择器范围 以控制表格是否显示每个变量的声明位置。
- 查看 未定义变量 面板中的任何
var(--name)无匹配声明的引用。 - 使用输出面板中的按钮复制或下载提取的列表。
特征
- 带大括号感知的解析器 – 逐字符遍历样式表，以正确处理嵌套选择器、媒体查询和引号值。
- 作用域跟踪 – 每个变量都与声明其的选择器或at规则配对，因此您可以将一个令牌与组件作用域覆盖区分开来。
:root– 提供纯文本表格用于查看，JSON用于程序化使用，以及一个可直接粘贴回样式表的干净 - 三种输出格式 块。
:root { }未定义变量检测 - – 标记任何在输入中未声明的 。
var(--name)– 输入中未声明的变量。 - 实时过滤器 – 输入变量名称、值或选择器范围以实时缩小结果。
- 去重和排序 – 同一作用域内的重复声明被合并，列表按字母顺序排序以便快速浏览。
- 完全在浏览器中运行 – 无任何文件上传；适用于私有和未完成的样式表。
何时使用此工具
- 审计设计系统样式表，以构建一个令牌主列表。
- 将SCSS变量迁移到原生CSS自定义属性。
- 追踪由拼写错误引起的失效样式。
var()引用。 - 生成一个来自第三方主题的初始
:root { }块。 - 将令牌导出为JSON，用于文档网站或Storybook条目。
常问问题
-
什么是CSS自定义属性？
CSS自定义属性（也称为CSS变量）是作者定义的标识符，以两个连字符开头（例如，--color-primary），其值可以在样式表的任何位置通过var()函数重用。与预处理器变量不同，自定义属性在浏览器运行时解析，这意味着它们会像其他CSS属性一样级联和继承，并且可以通过JavaScript动态更新。
-
选择器作用域如何影响自定义属性？
自定义属性仅存在于声明它的元素的子树中。在:root上声明使其成为全局属性，因为:root匹配html元素，而在组件选择器（如.card）中声明则将其值限制在该组件及其后代中。相同名称可以在不同作用域中持有不同值，这是主题、深色模式切换和组件级覆盖机制的基础。
-
为什么CSS在var()指向未定义的自定义属性时不会报错？
CSS自定义属性规范要求浏览器在引用的变量未声明时静默降级。如果var()没有备用参数，则整个属性被视为未设置，这通常会使元素保留其初始或继承的样式。由于控制台不会报告错误，未声明的引用容易被忽略，提前暴露这些问题可防止细微的视觉回归。
-
SCSS变量和CSS自定义属性是同一个东西吗？
它们具有相似的角色，但存在于不同的处理阶段。SCSS变量（如$color-primary）在SCSS编译为CSS时被解析，并在最终输出中消失。CSS自定义属性以两个连字符开头，经过编译后存活，并在渲染时由浏览器评估，这使得动态主题和JavaScript驱动的更新成为可能。
-
自定义属性可以重新声明吗？重新声明会发生什么？
可以。当同一个自定义属性在同一个元素上被声明多次时，正常的CSS级联机制决定哪个声明生效，考虑具体性、源顺序和重要性。在单个规则内，最后的声明会覆盖前面的声明，这与任何其他CSS属性的冲突解决行为相同。
