[css-syntax-3][css-variables-1][editorial] Clarify that the comment-insertion can happen with 0+ comments between the original tokens, not exactly 1. Add an example to Variables talking about this. w3c#7328

Author: tabatkins

css-syntax-3/Overview.bs

@@ -3663,7 +3663,8 @@ Serialization</h2>
 				the pair of tokens must be serialized with a comment between them.
 
 				If the tokenizer preserves comments,
-				the preserved comment should be used;
+				and there were comments originally between the token pair,
+				the preserved comment(s) should be used;
 				otherwise, an empty comment (<code>/**/</code>) must be inserted.
 				(Preserved comments may be reinserted even if the following tables don't require a comment between two tokens.)
 

css-variables-1/Overview.bs

@@ -905,6 +905,25 @@ Using Cascading Variables: the ''var()'' notation</h2>
 		  margin-top: calc(var(--gap) * 1px);
 		}
 		</pre>
+
+		This also implies that the post-substitution value
+		might not be directly serializable as-is.
+		Here's a similar example to the preceding:
+
+		<pre>
+		.foo {
+			--gap: 20;
+			--not-px-length: var(--gap)px;
+		}
+		</pre>
+
+		The serialization of the computed (post-subsitution)
+		value of ''--not-px-length''
+		is <strong>not</strong> ''20px'',
+		because that would parse back as the single combined dimension;
+		instead, it will serialize with a comment between the two tokens,
+		like ''20/**/px'',
+		to enforce that they are separate tokens even when re-parsing.
 	</div>
 
 	<wpt>