Skip to content

Commit ceb730f

Browse files
committed
[css-mixins-1] Refer properly to 'nested declarations rule' rather than an actual nested style rule.
1 parent 702224f commit ceb730f

File tree

1 file changed

+15
-9
lines changed

1 file changed

+15
-9
lines changed

css-mixins-1/Overview.bs

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -845,7 +845,7 @@ making them reusable and customizable with arguments.
845845

846846
<pre highlight=css>
847847
h1 {
848-
& {
848+
@nest {
849849
@env --from: pink;
850850
@env --to: powderblue;
851851
@env --angle: to bottom right;
@@ -861,6 +861,9 @@ making them reusable and customizable with arguments.
861861
}
862862
}
863863
</pre>
864+
865+
(Where <css>@nest</css> is a fictitious rule
866+
representing a [=nested declarations rule=].)
864867
</div>
865868

866869
Issue: The entire ''@mixin'' feature is experimental and under active development,
@@ -914,9 +917,9 @@ then the ''@mixin'' rule is invalid.
914917
<h4 id=mixin-body dfn lt="mixin body" export>
915918
The Mixin Body</h4>
916919

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=],
918921
and accepts the same properties and rules
919-
that a normal [=nested style rule=] would.
922+
that a normal [=nested declarations rule=] would.
920923

921924
In particular, further [=mixins=] can be invoked
922925
(via the ''@apply'' rule)
@@ -936,10 +939,10 @@ or those defined at the <em>call site</em>
936939
(a style rule, or another [=mixin=]).
937940

938941
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=]
940943
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.
943946

944947
<div class=example>
945948
For example, the following mixin use:
@@ -960,15 +963,18 @@ to correctly reproduce the argument scope
960963
<xmp highlight=css>
961964
p.nested {
962965
@env --color1: red;
963-
& {
966+
@nest {
964967
@env --color2: green;
965-
& {
968+
@nest {
966969
@env --color3: blue;
967970
background: linear-gradient(env(--color1), env(--color2), env(--color3));
968971
}
969972
}
970973
}
971974
</xmp>
975+
976+
(Where <css>@nest</css> here is a fictitous rule
977+
representing a [=nested declarations rule=].)
972978
</div>
973979

974980
<div class=example>
@@ -1016,7 +1022,7 @@ Using Mixins {#using-mixins}
10161022

10171023
The result of a [=mixin=] application
10181024
is substituted into the body of another [=style rule=]
1019-
as a [=nested style rule=]
1025+
as a [=nested declarations rule=]
10201026
via the ''@apply'' rule.
10211027

10221028
<h3 id=apply-rule>

0 commit comments

Comments
 (0)