css - 有没有办法输入检查 CSS 自定义属性(又名 CSS 变量)？

Question

我正在考虑用 CSS 自定义属性(例如 $someValue )替换 SCSS 变量(即 var(--someValue) )，以尝试在主题化和特定于上下文的覆盖方面提供更大的灵活性，并使浏览器中的 devtools 一点点更实用。最终，我可能希望完全转储 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> 。
实际上，开发工具不会向您显示任何内容，但将来可能会更改以获取警告。同时，当自定义属性未定义或定义为无效值时，您可以依赖将使用的初始值。