Update all the remaining examples.

--HG--
extra : rebase_source : 85c62b591e849fdc2f791c19d5a8a2e8eafb2b9e

Author: tabatkins

css-variables/Overview.html

@@ -374,7 +374,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
     the document. Its value can be referenced via the "header-color"
     variable:
 
-   <pre>h1 { background-color: var(header-color); }</pre>
+   <pre>h1 { background-color: $header-color; }</pre>
 
    <p> The preceding rule is equivalent to writing ‘<code
     class=css>background-color: #06c;</code>’, except that the variable
@@ -400,7 +400,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
 :root { var-color: blue; }
 div { var-color: green; }
 #alert { var-color: red; }
-* { color: var(color); }
+* { color: $color; }
 
 &lt;p>I inherited blue from the root element!&lt;/p>
 &lt;div>I got green set directly on me!&lt;/div>
@@ -425,7 +425,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
    <pre>
 :root {
 	var-main-color: #c06;
-	var-accent-background: linear-gradient(to top, var(main-color), white);
+	var-accent-background: linear-gradient(to top, $main-color, white);
 }</pre>
 
    <p> The ‘<code class=property>var-accent-background</code>’ property
@@ -439,8 +439,8 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
 
    <pre>
 :root {
-	var-one: calc(var(two) + 20px);
-	var-two: calc(var(one) - 20px);
+	var-one: calc($two + 20px);
+	var-two: calc($one - 20px);
 }</pre>
 
    <p> Both ‘<code class=property>var-one</code>’ and ‘<code
@@ -465,8 +465,8 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
    <pre>
 &lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
 one   { var-foo: 10px; }
-two   { var-bar: calc(var(foo) + 10px); }
-three { var-foo: calc(var(bar) + 10px); }</pre>
+two   { var-bar: calc($foo + 10px); }
+three { var-foo: calc($bar + 10px); }</pre>
 
    <p> The &lt;one> element defines a value for ‘<code
     class=property>var-foo</code>’. The &lt;two> element inherits this
@@ -491,32 +491,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
    variable an <a href="#invalid-variable"><i>invalid variable</i></a>. This
    is represented by the keyword ‘<code class=css>invalid</code>’, but
    that keyword has no special meaning in itself, and is valid if set
-   explicitly in a variable property.
-
-  <div class=example>
-   <pre>
-&lt;div>
-  &lt;p>Sample text&lt;/p>
-&lt;/div>
-&lt;style>
-p { var-foo: invalid; }
-div,p { font-family: var(foo); }
-&lt;/style></pre>
-
-   <p> In this example, the "foo" variable is an <a
-    href="#invalid-variable"><i>invalid variable</i></a> at the time the DIV
-    element references it, because the ‘<code
-    class=property>var-foo</code>’ property still has its initial value.
-    This causes the DIV's ‘<code class=property>font-family</code>’
-    property to compute to the initial value for ‘<code
-    class=property>font-family</code>’.
-
-   <p> On the other hand, the P element defines an explicit value for the
-    ‘<code class=property>var-foo</code>’ property. Its ‘<code
-    class=property>font-family</code>’ property thus references a font
-    named "invalid".
-  </div>
-  <!--
+   explicitly in a variable property. <!--
 UUUUUUUU     UUUUUUUU                  iiii                                       
 U::::::U     U::::::U                 i::::i                                      
 U::::::U     U::::::U                  iiii                                       
@@ -541,6 +516,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
                                                                   ggg::::::ggg    
                                                                      gggggg  
 -->
+   
 
   <h2 id=using-variables><span class=secno>3. </span> Using Variables</h2>
 
@@ -739,7 +715,7 @@ <h3 id=using-invalid-variables><span class=secno>3.4. </span> Using Invalid
    <pre>
 :root { var-not-a-color: 20px; }
 p { background-color: red; }
-p { background-color: var(not-a-color); }</pre>
+p { background-color: $not-a-color; }</pre>
 
    <p> the &lt;p> elements will have transparent backgrounds (the initial
     value for ‘<code class=property>background-color</code>’), rather

css-variables/Overview.src.html

@@ -235,7 +235,7 @@ <h2 id="defining-variables">
 			This property is then inherited to the elements in the rest of the document.  
 			Its value can be referenced via the "header-color" variable:
 
-		<pre>h1 { background-color: var(header-color); }</pre>
+		<pre>h1 { background-color: $header-color; }</pre>
 
 		<p>
 			The preceding rule is equivalent to writing ''background-color: #06c;'', 
@@ -263,7 +263,7 @@ <h2 id="defining-variables">
 :root { var-color: blue; }
 div { var-color: green; }
 #alert { var-color: red; }
-* { color: var(color); }
+* { color: $color; }
 
 &lt;p>I inherited blue from the root element!&lt;/p>
 &lt;div>I got green set directly on me!&lt;/div>
@@ -287,7 +287,7 @@ <h2 id="defining-variables">
 		<pre>
 :root {
 	var-main-color: #c06;
-	var-accent-background: linear-gradient(to top, var(main-color), white);
+	var-accent-background: linear-gradient(to top, $main-color, white);
 }</pre>
 
 		<p>
@@ -301,8 +301,8 @@ <h2 id="defining-variables">
 
 		<pre>
 :root {
-	var-one: calc(var(two) + 20px);
-	var-two: calc(var(one) - 20px);
+	var-one: calc($two + 20px);
+	var-two: calc($one - 20px);
 }</pre>
 
 		<p>
@@ -327,8 +327,8 @@ <h2 id="defining-variables">
 		<pre>
 &lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
 one   { var-foo: 10px; }
-two   { var-bar: calc(var(foo) + 10px); }
-three { var-foo: calc(var(bar) + 10px); }</pre>
+two   { var-bar: calc($foo + 10px); }
+three { var-foo: calc($bar + 10px); }</pre>
 
 		<p>
 			The &lt;one> element defines a value for 'var-foo'.  
@@ -353,28 +353,6 @@ <h2 id="defining-variables">
 		but that keyword has no special meaning in itself, 
 		and is valid if set explicitly in a variable property.
 
-	<div class='example'>
-		<pre>
-&lt;div>
-  &lt;p>Sample text&lt;/p>
-&lt;/div>
-&lt;style>
-p { var-foo: invalid; }
-div,p { font-family: var(foo); }
-&lt;/style></pre>
-
-		<p>
-			In this example, 
-			the "foo" variable is an <i>invalid variable</i> at the time the DIV element references it, 
-			because the 'var-foo' property still has its initial value.  
-			This causes the DIV's 'font-family' property to compute to the initial value for 'font-family'.
-
-		<p>
-			On the other hand, 
-			the P element defines an explicit value for the 'var-foo' property.  
-			Its 'font-family' property thus references a font named "invalid".
-	</div>
-
 
 <!--
 UUUUUUUU     UUUUUUUU                  iiii                                       
@@ -480,6 +458,7 @@ <h3 id='var-glyph'>
 }</pre>
 	</div>
 
+
 <h3 id='var-function'>
 Default Values - the ''var()'' notation</h3>
 
@@ -615,7 +594,7 @@ <h3 id='using-invalid-variables'>
 		<pre>
 :root { var-not-a-color: 20px; }
 p { background-color: red; }
-p { background-color: var(not-a-color); }</pre>
+p { background-color: $not-a-color; }</pre>
 
 		<p>
 			the &lt;p> elements will have transparent backgrounds