css 变量名可以以数字开头吗？

Question

我想知道定义一个以这样的数字开头的css变量是否有效，

:root { --1space: 32px; }

这与 Chrome 一起工作得很好，但是该代码未被 https://jigsaw.w3.org/css-validator/ 验证，并且 VSCode 在变量名下画了一条红线。

如果css变量名是idents那么按照这个图以数字开头应该没问题；

https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

Answer 1

是的，它是有效的。如果我们按照 the definition in the speficiation:

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any valid identifier that starts with two dashes

和

identifier

A portion of the CSS source that has the same syntax as an <ident-token>. Also appears in <at-keyword-token>, <function-token>, <hash-token> with the "id" type flag, and the unit of <dimension-token>.

:root {
 --2222:red;
}

body {
  background:var(--2222);
}

css 变量名可以以数字开头吗？

Can a css variable name start with a number?

css

syntax

css-validator

css-variables