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

Question

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

但是，我注意到与 SCSS 变量不同，CSS 自定义属性完全未经检查，并且拼写错误是正常的。我的代码以令人困惑的方式中断，因为打字错误要么设置 CSS 自定义属性，要么在表达式中使用它 - 毕竟，CSS 使用 un-设置或无效设置 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>.

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

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

Is there a way to type check CSS custom properties (aka CSS variables)?

css

sass

css-variables