有没有办法类型检查 CSS 自定义属性（又名 CSS 变量）？

Question

我正在考虑用$someValueCSS自定义属性（例如）替换SCSS变量（例如var(--someValue)），试图在主题和特定于上下文的覆盖形式上提供更多的灵活性，并使浏览器中的开发工具更可用。最终，我可能想完全转储 SCSS 变量，以简化开发堆栈。

然而，我注意到与 SCSS 变量不同，CSS 自定义属性完全未经检查，并且拼写错误是一个问题。我曾以令人困惑的方式出现代码中断，因为设置 CSS 自定义属性或在表达式中使用它时出现拼写错误 - 毕竟，CSS 对于使用未设置或无效设置的 CSS 属性非常宽松。

由于 CSS 自定义属性目前并不完全是新的，我认为我能够找到一些 webpack 插件或其他解决方案来为 CSS 属性添加基本类型检查，但我似乎找不到任何。理想情况下，我希望要求以某种方式声明所有 CSS 自定义属性，包括其内容的类型（以确保例如变量始终用作无量纲、全量纲值、颜色等） ），但即使只是一个检测拼写错误的工具或技术也能捕获真正的错误。然而，我一直无法找到类似的东西，无论是作为构建工具，还是 SASS 插件。

在使用 CSS 自定义属性时，如何保护自己免受简单的疏忽，例如检测到设置为的属性--someValue: 13px从未使用过，或者相反，引用var(--someValue)似乎没有匹配的分配？

Answer 1

使用新@property规则，您几乎可以得到您想要的，因为它将允许定义变量的类型。

例子：

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

.box {
  --primary-color: red; /* this one is valid */
  background:var(--primary-color);
  height:100px;
}

.box-alt {
  --primary-color:10px; /* this one is invalid and will fall to the intial-value */
  background:var(--primary-color);
  border:var(--primary-color) solid green; /* it won't be used here even if contain pixel */
  height:100px;
}

<div class="box"></div>

<div class="box-alt"></div>

您需要在 Chrome 或 Edge 上运行上述内容（Firefox 仍然不支持这一点）。正如您所看到的，这里不允许使用像素值，因为我们将类型指定为<color>。

实际上，开发工具不会向您显示任何内容，但这可能会在将来发生变化以获得一些警告。同时，您可以依赖当自定义属性未定义或定义为无效值时将使用的初始值。