@@ -845,7 +845,7 @@ making them reusable and customizable with arguments.
845
845
846
846
<pre highlight=css>
847
847
h1 {
848
- & {
848
+ @nest {
849
849
@env --from: pink;
850
850
@env --to: powderblue;
851
851
@env --angle: to bottom right;
@@ -861,6 +861,9 @@ making them reusable and customizable with arguments.
861
861
}
862
862
}
863
863
</pre>
864
+
865
+ (Where <css> @nest</css> is a fictitious rule
866
+ representing a [=nested declarations rule=] .)
864
867
</div>
865
868
866
869
Issue: The entire ''@mixin'' feature is experimental and under active development,
@@ -914,9 +917,9 @@ then the ''@mixin'' rule is invalid.
914
917
<h4 id=mixin-body dfn lt="mixin body" export>
915
918
The Mixin Body</h4>
916
919
917
- The body of a ''@mixin'' rule acts as a [=nested style rule=] ,
920
+ The body of a ''@mixin'' rule acts as a [=nested declarations rule=] ,
918
921
and accepts the same properties and rules
919
- that a normal [=nested style rule=] would.
922
+ that a normal [=nested declarations rule=] would.
920
923
921
924
In particular, further [=mixins=] can be invoked
922
925
(via the ''@apply'' rule)
@@ -936,10 +939,10 @@ or those defined at the <em>call site</em>
936
939
(a style rule, or another [=mixin=] ).
937
940
938
941
In that list, earlier things "win" over later things of the same name,
939
- exactly as if the [=mixin body=] was a [=nested style rule=]
942
+ exactly as if the [=mixin body=] was a [=nested declarations rule=]
940
943
placed at its call site.
941
- Specifically, it desugars to <em> two</em> [=nested style rules=] ,
942
- to correctly reproduce the argument scope
944
+ Specifically, it desugars to <em> two</em> [=nested declarations rules=] ,
945
+ to correctly reproduce the argument scope.
943
946
944
947
<div class=example>
945
948
For example, the following mixin use:
@@ -960,15 +963,18 @@ to correctly reproduce the argument scope
960
963
<xmp highlight=css>
961
964
p.nested {
962
965
@env --color1: red;
963
- & {
966
+ @nest {
964
967
@env --color2: green;
965
- & {
968
+ @nest {
966
969
@env --color3: blue;
967
970
background: linear-gradient(env(--color1), env(--color2), env(--color3));
968
971
}
969
972
}
970
973
}
971
974
</xmp>
975
+
976
+ (Where <css> @nest</css> here is a fictitous rule
977
+ representing a [=nested declarations rule=] .)
972
978
</div>
973
979
974
980
<div class=example>
@@ -1016,7 +1022,7 @@ Using Mixins {#using-mixins}
1016
1022
1017
1023
The result of a [=mixin=] application
1018
1024
is substituted into the body of another [=style rule=]
1019
- as a [=nested style rule=]
1025
+ as a [=nested declarations rule=]
1020
1026
via the ''@apply'' rule.
1021
1027
1022
1028
<h3 id=apply-rule>
0 commit comments