[css-variables][Editorial] Move second half of Example 11 to section 2.1 #462
Description
Example 11:
For example, the following code incorrectly attempts to use a variable as a property name:
.foo {
--side: margin-top;
var(--side): 20px;
}
This is not equivalent to setting margin-top: 20px;. Instead, the second declaration is simply thrown away as a syntax error for having an invalid property name.Similarly, you can’t build up a single token where part of it is provided by a variable:
.foo {
--gap: 20;
margin-top: var(--gap)px;
}
Again, this is not equivalent to setting margin-top: 20px; (a length). Instead, it’s equivalent to margin-top: 20 px; (a number followed by an ident), which is simply an invalid value for the margin-top property. Note, though, that calc() can be used to validly achieve the same thing, like so:.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
The second example does not actually follow from the first, and does not demonstrate anything discussed in Section 3, despite the use of "Similarly". Instead, this is demonstrating a consequence of the definition, which is presented in 2.1, and specifically this part:
The production matches any sequence of one or more tokens, so long as the sequence does not contain
<bad-string-token>, [...]
Therefore, I think it would make more sense to move that example to 2.1.