[css-mixins-1][editorial] Fix some more examples to use the new mixin syntax.

Author: tabatkins

��css-mixins-1/Overview.bs

@@ -885,16 +885,16 @@ making them reusable and customizable with arguments.
 
 	<pre highlight=css>
 		@mixin --gradient-text(
-			--from type(<<color>>): mediumvioletred,
-			--to type(<<color>>): teal,
+			--from <<color>>: mediumvioletred,
+			--to <<color>>: teal,
 			--angle: to bottom right,
 		) {
+			--gradient: linear-gradient(var(--angle), var(--from), var(--to));
 			@result {
-				color: env(--from, env(--to));
+				color: var(--from, var(--to));
 
 				@supports (background-clip: text) or (-webkit-background-clip: text) {
-					@env --gradient: linear-gradient(env(--angle), env(--from), env(--to));
-					background: env(--gradient, env(--from));
+					background: var(--gradient, var(--from));
 					color: transparent;
 					-webkit-background-clip: text;
 					background-clip: text;
@@ -907,36 +907,31 @@ making them reusable and customizable with arguments.
 		}
 	</pre>
 
-	Note that this example also uses a [=scoped environment variable=]
-	(along with the arguments, which implicitly define [=scoped environment variables=])
-	which is scoped to <em>the rule itself</em>
-	(rather than being applied to the element, like a [=custom property=] would be)
-	to hold a temporary value to aid in readability of the [=mixin=],
-	without polluting the element's styles with unwanted [=custom properties=].
+	Note that this example also uses a [=local variable=] ''--gradient'',
+	which is accessible inside the mixin
+	to aid in readability,
+	but won't pollute the element's actual styles.
 
-	This is exactly equivalent to writing a [=nested style rule=] literally into the `h1` styles:
+	This is roughly equivalent to writing a [=nested style rule=] literally into the `h1` styles:
 
 	<pre highlight=css>
 		h1 {
-			@nest {
-				@env --from: pink;
-				@env --to: powderblue;
-				@env --angle: to bottom right;
-				color: env(--from, env(--to));
-
-				@supports (background-clip: text) or (-webkit-background-clip: text) {
-					@env --gradient: linear-gradient(env(--angle), env(--from), env(--to));
-					background: env(--gradient, env(--from));
-					color: transparent;
-					-webkit-background-clip: text;
-					background-clip: text;
-				}
+			--from: pink;
+			--to: powderblue;
+			--angle: to bottom right;
+			color: var(--from, var(--to));
+
+			@supports (background-clip: text) or (-webkit-background-clip: text) {
+				--gradient: linear-gradient(var(--angle), var(--from), var(--to));
+				background: var(--gradient, var(--from));
+				color: transparent;
+				-webkit-background-clip: text;
+				background-clip: text;
 			}
 		}
 	</pre>
 
-	(Where <css>@nest</css> is a fictitious rule
-	representing a [=nested declarations rule=].)
+	(except that none of those custom properties actually show up in the element's styles)
 </div>
 
 Issue: The entire ''@mixin'' feature is experimental and under active development,
@@ -1457,8 +1452,10 @@ that block is passed as the mixin's [=contents block=].
 
 	<pre highlight=css>
 	@mixin --just-contents() {
-		@contents { color: red; }
-		/* `color: red` is the fallback content */
+		@result {
+			@contents { color: red; }
+			/* `color: red` is the fallback content */
+		}
 	}
 
 	.foo {