[css-mixins-1] Better example of how env/var work together.

Author: tabatkins

css-mixins-1/Overview.bs

@@ -999,21 +999,44 @@ to correctly reproduce the argument scope.
 	</xmp>
 </div>
 
-<div class=example>
-	Note that [=mixin parameters=] are [=scoped environment variables=]
-	rather than [=custom properties=],
-	which means they exist in a separate namespace
-	and don't interfere with [=custom properties=].
-	They can even be used together.
+Note that [=mixin parameters=] are [=scoped environment variables=]
+rather than [=custom properties=],
+which means they exist in a separate namespace
+and don't interfere with [=custom properties=].
+
+The two generally act very similarly,
+except for the slightly different definition syntax
+(a [=custom property=] versus an ''@env'' rule)
+and substitution functions
+(''var()'' versus ''env()''),
+but using [=custom properties=] actually writes those properties
+into the invoking style rule
+(potentially interacting with other definitions and uses of that [=custom property=],
+which can be good or bad),
+while ''@env'' rules in a [=mixin=]
+aren't visible to anything outside of the [=mixin body=].
 
-	For example, this code shows how to use a [=custom property=]
-	as the fallback for a [=mixin parameter=]:
+<div class=example>
+	For example, this code shows a [=mixin=]
+	setting [=custom properties=] for other properties to use:
 
-	<pre highlight=css>
-	@mixin --var-fallback(--arg: var(--arg)) {
-		/* TODO: come up with a believable example */
+	<xmp highlight=css>
+	@mixin --tint-shade(--hue <angle>) {
+		--light-tint: lch(90% 20% env(--hue));
+		--dark-shade: lch(10% 80% env(--hue));
 	}
-	</pre>
+	.warning {
+		@apply --tint-shade(0deg);
+		background: var(--light-tint);
+		color: var(--dark-shade);
+		padding: .5em;
+		border: thick solid currentcolor;
+	}
+	</xmp>
+
+	If the [=mixin=] had instead declared them as ''@env --light-tint: ...;''/etc,
+	then those would only be available <em>within</em> the [=mixin body=],
+	and the ''.warning'' rule would not be able to use them.
 </div>