Skip to content

Commit d8fdd23

Browse files
tabatkinstabatkins
committed
[css-variables] Updated all the examples to remove uses of $.
1 parent 27c2b0a commit d8fdd23

2 files changed

Lines changed: 81 additions & 62 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 50 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
345345
the document. Its value can be referenced via the "header-color"
346346
variable:
347347

348-
<pre>h1 { background-color: $header-color; }</pre>
348+
<pre>h1 { background-color: var(header-color); }</pre>
349349

350350
<p> The preceding rule is equivalent to writing ‘<code
351351
class=css>background-color: #06c;</code>’, except that the variable
@@ -367,18 +367,28 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
367367
always draw from the computed value of the associated custom property on
368368
the same element:
369369

370-
<pre>
371-
:root { var-color: blue; }
372-
div { var-color: green; }
373-
#alert { var-color: red; }
374-
* { color: $color; }
375-
376-
&lt;p>I inherited blue from the root element!&lt;/p>
377-
&lt;div>I got green set directly on me!&lt;/div>
378-
&lt;div id='alert'>
379-
While I got red set directly on me!
380-
&lt;p>I'm red too, because of inheritance!&lt;/p>
381-
&lt;/div></pre>
370+
<pre><!--
371+
-->:root { var-color: blue; }
372+
<!--
373+
-->div { var-color: green; }
374+
<!--
375+
-->#alert { var-color: red; }
376+
<!--
377+
-->* { color: var(color); }
378+
<!--
379+
-->
380+
<!--
381+
-->&lt;p>I inherited blue from the root element!&lt;/p>
382+
<!--
383+
-->&lt;div>I got green set directly on me!&lt;/div>
384+
<!--
385+
-->&lt;div id='alert'>
386+
<!--
387+
--> While I got red set directly on me!
388+
<!--
389+
--> &lt;p>I'm red too, because of inheritance!&lt;/p>
390+
<!--
391+
-->&lt;/div></pre>
382392
</div>
383393

384394
<p> <a href="#custom-property"><i>Custom properties</i></a> may use
@@ -392,27 +402,33 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
392402
<div class=example>
393403
<p> This example shows a custom property safely using a variable:
394404

395-
<pre>
396-
:root {
397-
var-main-color: #c06;
398-
var-accent-background: linear-gradient(to top, $main-color, white);
399-
}</pre>
405+
<pre><!--
406+
-->:root {
407+
<!--
408+
--> var-main-color: #c06;
409+
<!--
410+
--> var-accent-background: linear-gradient(to top, var(main-color), white);
411+
<!--
412+
-->}</pre>
400413

401414
<p> The ‘<code class=property>var-accent-background</code>’ property
402415
(along with any other properties that use ‘<code
403-
class=css>$main-color</code>’) will automatically update when the
416+
class=css>var(main-color)</code>’) will automatically update when the
404417
‘<code class=property>var-main-color</code>’ property is changed.
405418
</div>
406419

407420
<div class="example invalid-example">
408421
<p> On the other hand, this example shows an invalid instance of variables
409422
depending on each other:
410423

411-
<pre>
412-
:root {
413-
var-one: calc($two + 20px);
414-
var-two: calc($one - 20px);
415-
}</pre>
424+
<pre><!--
425+
-->:root {
426+
<!--
427+
--> var-one: calc(var(two) + 20px);
428+
<!--
429+
--> var-two: calc(var(one) - 20px);
430+
<!--
431+
-->}</pre>
416432

417433
<p> Both ‘<code class=property>var-one</code>’ and ‘<code
418434
class=property>var-two</code>’ now define <a
@@ -433,11 +449,14 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Custom
433449
<p> For example, given the following structure, these custom properties
434450
are <strong>not</strong> cyclic, and all define valid variables:
435451

436-
<pre>
437-
&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
438-
one { var-foo: 10px; }
439-
two { var-bar: calc($foo + 10px); }
440-
three { var-foo: calc($bar + 10px); }</pre>
452+
<pre><!--
453+
-->&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
454+
<!--
455+
-->one { var-foo: 10px; }
456+
<!--
457+
-->two { var-bar: calc(var(foo) + 10px); }
458+
<!--
459+
-->three { var-foo: calc(var(bar) + 10px); }</pre>
441460

442461
<p> The &lt;one> element defines a value for ‘<code
443462
class=property>var-foo</code>’. The &lt;two> element inherits this
@@ -562,7 +581,7 @@ <h2 id=using-variables><span class=secno>3. </span> Using Variables - the
562581
<pre><!--
563582
-->:root { var-looks-valid: 20px; }
564583
<!--
565-
-->p { background-color: $looks-valid; }</pre>
584+
-->p { background-color: var(looks-valid); }</pre>
566585

567586
<p> Since ‘<code class=css>20px</code>’ is an invalid value for
568587
‘<code class=property>background-color</code>’, this instance of the
@@ -630,7 +649,7 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
630649
<!--
631650
-->p { background-color: red; }
632651
<!--
633-
-->p { background-color: $not-a-color; }</pre>
652+
-->p { background-color: var(not-a-color); }</pre>
634653

635654
<p> the &lt;p> elements will have transparent backgrounds (the initial
636655
value for ‘<code class=property>background-color</code>’), rather

‎css-variables/Overview.src.html‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ <h2 id="defining-variables">
210210
This property is then inherited to the elements in the rest of the document.
211211
Its value can be referenced via the "header-color" variable:
212212

213-
<pre>h1 { background-color: $header-color; }</pre>
213+
<pre>h1 { background-color: var(header-color); }</pre>
214214

215215
<p>
216216
The preceding rule is equivalent to writing ''background-color: #06c;'',
@@ -234,18 +234,18 @@ <h2 id="defining-variables">
234234
the standard cascade rules help resolve it.
235235
Variables always draw from the computed value of the associated custom property on the same element:
236236

237-
<pre>
238-
:root { var-color: blue; }
239-
div { var-color: green; }
240-
#alert { var-color: red; }
241-
* { color: $color; }
242-
243-
&lt;p>I inherited blue from the root element!&lt;/p>
244-
&lt;div>I got green set directly on me!&lt;/div>
245-
&lt;div id='alert'>
246-
While I got red set directly on me!
247-
&lt;p>I'm red too, because of inheritance!&lt;/p>
248-
&lt;/div></pre>
237+
<pre><!--
238+
-->:root { var-color: blue; }&#xa;<!--
239+
-->div { var-color: green; }&#xa;<!--
240+
-->#alert { var-color: red; }&#xa;<!--
241+
-->* { color: var(color); }&#xa;<!--
242+
-->&#xa;<!--
243+
-->&lt;p>I inherited blue from the root element!&lt;/p>&#xa;<!--
244+
-->&lt;div>I got green set directly on me!&lt;/div>&#xa;<!--
245+
-->&lt;div id='alert'>&#xa;<!--
246+
--> While I got red set directly on me!&#xa;<!--
247+
--> &lt;p>I'm red too, because of inheritance!&lt;/p>&#xa;<!--
248+
-->&lt;/div></pre>
249249
</div>
250250

251251
<p>
@@ -259,15 +259,15 @@ <h2 id="defining-variables">
259259
<p>
260260
This example shows a custom property safely using a variable:
261261

262-
<pre>
263-
:root {
264-
var-main-color: #c06;
265-
var-accent-background: linear-gradient(to top, $main-color, white);
266-
}</pre>
262+
<pre><!--
263+
-->:root {&#xa;<!--
264+
--> var-main-color: #c06;&#xa;<!--
265+
--> var-accent-background: linear-gradient(to top, var(main-color), white);&#xa;<!--
266+
-->}</pre>
267267

268268
<p>
269269
The 'var-accent-background' property
270-
(along with any other properties that use ''$main-color'')
270+
(along with any other properties that use ''var(main-color)'')
271271
will automatically update when the 'var-main-color' property is changed.
272272
</div>
273273

@@ -276,11 +276,11 @@ <h2 id="defining-variables">
276276
On the other hand,
277277
this example shows an invalid instance of variables depending on each other:
278278

279-
<pre>
280-
:root {
281-
var-one: calc($two + 20px);
282-
var-two: calc($one - 20px);
283-
}</pre>
279+
<pre><!--
280+
-->:root {&#xa;<!--
281+
--> var-one: calc(var(two) + 20px);&#xa;<!--
282+
--> var-two: calc(var(one) - 20px);&#xa;<!--
283+
-->}</pre>
284284

285285
<p>
286286
Both 'var-one' and 'var-two' now define <i>invalid variables</i> rather than lengths.
@@ -301,11 +301,11 @@ <h2 id="defining-variables">
301301
these custom properties are <strong>not</strong> cyclic,
302302
and all define valid variables:
303303

304-
<pre>
305-
&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
306-
one { var-foo: 10px; }
307-
two { var-bar: calc($foo + 10px); }
308-
three { var-foo: calc($bar + 10px); }</pre>
304+
<pre><!--
305+
-->&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>&#xa;<!--
306+
-->one { var-foo: 10px; }&#xa;<!--
307+
-->two { var-bar: calc(var(foo) + 10px); }&#xa;<!--
308+
-->three { var-foo: calc(var(bar) + 10px); }</pre>
309309

310310
<p>
311311
The &lt;one> element defines a value for 'var-foo'.
@@ -423,7 +423,7 @@ <h2 id='using-variables'>
423423

424424
<pre><!--
425425
-->:root { var-looks-valid: 20px; }&#xa;<!--
426-
-->p { background-color: $looks-valid; }</pre>
426+
-->p { background-color: var(looks-valid); }</pre>
427427

428428
<p>
429429
Since ''20px'' is an invalid value for 'background-color',
@@ -502,7 +502,7 @@ <h3 id='using-invalid-variables'>
502502
<pre><!--
503503
-->:root { var-not-a-color: 20px; }&#xa;<!--
504504
-->p { background-color: red; }&#xa;<!--
505-
-->p { background-color: $not-a-color; }</pre>
505+
-->p { background-color: var(not-a-color); }</pre>
506506

507507
<p>
508508
the &lt;p> elements will have transparent backgrounds

0 commit comments

Comments
 (0)