Skip to content

Commit d2221ac

Browse files
tabatkinstabatkins
committed
Add the syntax for variables.
--HG-- extra : rebase_source : 1795029bf0a7c330f65e6a927d0fd4dc82b96160
1 parent e13d5f4 commit d2221ac

1 file changed

Lines changed: 91 additions & 32 deletions

File tree

‎css-variables/Overview.src.html‎

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,10 @@ <h2 id="defining-variables">
121121
<table class='propdef'>
122122
<tr>
123123
<th>Name:</th>
124-
<td><dfn id='variable-property' title='variable property|variable properties'>var-*</dfn>
124+
<td><dfn>var-*</dfn>
125125
<tr>
126126
<th>Values:
127-
<td><var>&lt;value></var>+
127+
<td><var>&lt;value></var>
128128
<tr>
129129
<th>Initial:
130130
<td>invalid (a keyword, but see prose)
@@ -159,22 +159,24 @@ <h2 id="defining-variables">
159159
unbalanced parentheses are invalid.
160160

161161
<p>
162-
<em>Any</em> property name starting with the prefix "var-" is a <i>variable property</i>.
163-
Variable properties are defined to be valid but meaningless
164-
as they are meant solely for allowing authors to pass custom data around their page,
165-
similar to the <a href="http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes">custom data attributes</a> in HTML.
166-
Other specifications and user agents must not assign a particular meaning to <i>variable properties</i>
167-
or attach a specific effect to them beyond the bare minimum that comes from them being valid properties.
162+
<em>Any</em> property whose names starts with the prefix "var-" is a <dfn title="variable property|variables properties">variable property</dfn>.
163+
A <i>variable property</i> defines a value for a corresponding <i>variable</i>
164+
with the same name as the property except that the "var-" prefix is replaced with a "$" prefix.
168165

169166
<p class='issue'>
170167
As defined here,
171168
the syntax for variable usage is different from the syntax for variable definition
172-
(i.e. var-foo for definition, var(foo) for usage).
173-
Some have suggested that the syntaxes should should match,
174-
using functional syntax in both cases.
175-
Others have suggested using a prefixed symbol instead of functional syntax
176-
(e.g. $foo)
177-
for both the property and usage.
169+
(i.e. var-foo for definition, $foo for usage).
170+
It might be nice to have the syntaxes match,
171+
using "$foo" as the property name as well.
172+
This would require a minor change in the Core Grammar.
173+
174+
<p>
175+
<i>Variable properties</i> are defined to be valid but meaningless
176+
as they are meant solely for allowing authors to pass custom data around their page,
177+
similar to the <a href="http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes">custom data attributes</a> in HTML.
178+
Other specifications and user agents must not assign a particular meaning to <i>variable properties</i>
179+
or attach a specific effect to them beyond the bare minimum that comes from them being valid properties.
178180

179181
<p>
180182
This specification reserves the use of all function tokens starting with the prefix "var" within variable properties.
@@ -366,40 +368,77 @@ <h2 id="defining-variables">
366368
</div>
367369

368370

371+
<!--
372+
UUUUUUUU UUUUUUUU iiii
373+
U::::::U U::::::U i::::i
374+
U::::::U U::::::U iiii
375+
UU:::::U U:::::UU
376+
U:::::U U:::::U ssssssssss iiiiiiinnnn nnnnnnnn ggggggggg ggggg
377+
U:::::D D:::::U ss::::::::::s i:::::in:::nn::::::::nn g:::::::::ggg::::g
378+
U:::::D D:::::Uss:::::::::::::s i::::in::::::::::::::nn g:::::::::::::::::g
379+
U:::::D D:::::Us::::::ssss:::::s i::::inn:::::::::::::::ng::::::ggggg::::::gg
380+
U:::::D D:::::U s:::::s ssssss i::::i n:::::nnnn:::::ng:::::g g:::::g
381+
U:::::D D:::::U s::::::s i::::i n::::n n::::ng:::::g g:::::g
382+
U:::::D D:::::U s::::::s i::::i n::::n n::::ng:::::g g:::::g
383+
U::::::U U::::::Ussssss s:::::s i::::i n::::n n::::ng::::::g g:::::g
384+
U:::::::UUU:::::::Us:::::ssss::::::si::::::i n::::n n::::ng:::::::ggggg:::::g
385+
UU:::::::::::::UU s::::::::::::::s i::::::i n::::n n::::n g::::::::::::::::g
386+
UU:::::::::UU s:::::::::::ss i::::::i n::::n n::::n gg::::::::::::::g
387+
UUUUUUUUU sssssssssss iiiiiiii nnnnnn nnnnnn gggggggg::::::g
388+
g:::::g
389+
gggggg g:::::g
390+
g:::::gg gg:::::g
391+
g::::::ggg:::::::g
392+
gg:::::::::::::g
393+
ggg::::::ggg
394+
gggggg
395+
-->
396+
397+
369398
<h2 id='using-variables'>
370-
Using Variables: the var() function</h2>
399+
Using Variables</h2>
371400

372401
<p>
402+
After assigning a value to a <dfn>variable</dfn>
403+
with a <i>variable property</i>,
373404
A <dfn>variable</dfn> allows the value of a <i>variable property</i> on an element
374-
to be substituted into another property on the element.
375-
Variables are used with the ''var()'' function,
376-
taking the name of a variable
377-
and returning the value of the associated variable property.
378-
The syntax of the ''var()'' function is:
405+
to be substituted into another property on the element.
406+
There are several ways to use variables.
379407

380-
<pre><dfn id='type-variable' title="variable|variables">&lt;variable></dfn> = var( IDENT )</pre>
408+
<h3 id='var-glyph'>
409+
The $ Prefix</h3>
381410

382411
<p>
383-
The ''var()'' function references the <i>variable property</i>
384-
with the name obtained by prepending "var-" to the function's argument.
385-
<span class='note'>Note that all possible <i>variable properties</i> exist;
386-
if one with the given name has not yet been defined in the document,
387-
it simply takes its initial value.</span>
388-
When a property resolves its computed value,
389-
a ''var()'' function is replaced by the value of the referenced <i>variable property</i>.
412+
The simplest way to use a variable is to refer to it by name,
413+
prefixed with a "$" character.
414+
415+
<div class='example'>
416+
<p>
417+
For example,
418+
the following code defines and uses a variable named "main-color".
419+
420+
<pre>
421+
:root {
422+
var-main-color: blue;
423+
}
424+
425+
h1 {
426+
color: $main-color;
427+
}</pre>
428+
</div>
390429

391430
<p>
392-
A variable can be used anywhere a value is expected in CSS.
431+
A variable can be used in place of any component value in any property on an element.
393432
Variables can not be used as
394433
property names,
395434
selectors,
396435
or anything else besides property values -
397436
doing so either produces an invalid value or,
398437
in some situations like the attribute value of an attribute selector,
399-
a valid value that nonetheless has no relation to the variable of that name.
438+
produces a valid value that nonetheless has no relation to the variable of that name.
400439

401440
<p>
402-
A variable is substituted for its value in the property value at computed-value time.
441+
A variable is substituted for its value in the property value at computed-value time.
403442
If a declaration,
404443
once all variables are substituted in,
405444
is invalid,
@@ -413,7 +452,7 @@ <h2 id='using-variables'>
413452

414453
<pre>
415454
:root { var-looks-valid: 20px; }
416-
p { background-color: var(looks-valid); }</pre>
455+
p { background-color: $looks-valid; }</pre>
417456

418457
<p>
419458
Since ''20px'' is an invalid value for 'background-color',
@@ -422,6 +461,26 @@ <h2 id='using-variables'>
422461
instead.
423462
</div>
424463

464+
<h3 id='var-function'>
465+
Default Values - the ''var()'' notation</h3>
466+
467+
Variables are used with the ''var()'' function,
468+
taking the name of a variable
469+
and returning the value of the associated variable property.
470+
The syntax of the ''var()'' function is:
471+
472+
<pre><dfn id='type-variable' title="variable|variables">&lt;variable></dfn> = var( IDENT )</pre>
473+
474+
<p>
475+
The ''var()'' function references the <i>variable property</i>
476+
with the name obtained by prepending "var-" to the function's argument.
477+
<span class='note'>Note that all possible <i>variable properties</i> exist;
478+
if one with the given name has not yet been defined in the document,
479+
it simply takes its initial value.</span>
480+
When a property resolves its computed value,
481+
a ''var()'' function is replaced by the value of the referenced <i>variable property</i>.
482+
483+
425484
<h3 id='using-invalid-variables'>
426485
Using Invalid Variables</h3>
427486

0 commit comments

Comments
 (0)