[css-nesting-1] initial idea for nested conditionals #5645
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
@argyleink very useful idea at first glance! .foo {
color: red;
@media (min-width: 20rem) {
color: blue;
@media (max-width: 30rem) {
color: green;
}
}
}
/* equivalent to */
.foo {
color: red;
}
@media (min-width: 20rem) {
.foo {
color: blue;
}
}
@media (min-width: 20rem) and (max-width: 30rem) {
.foo {
color: green;
}
}You've add this example. .foo {
display: grid;
@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
}
}
/* equivalent to */
.foo { display: grid; }
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}So could we nest .foo {
display: grid;
& {
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
}
/* equvialent to */
.foo {
display: grid;
}
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}So if we combine upper syntax we could achieve .foo {
display: grid;
@media (max-width: 500px) {
& {
@media (orientation: landscape) {
grid-auto-flow: column;
}
}
}
}
/* is equvialent to? */
.foo {
display: grid;
}
@media (max-width: 500px) and (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
} |
|
Thanks for requesting clarification on nesting conditionals inside conditionals and posting some pseudo code 🙂 I'd like to make a spec addition that demonstrates the syntax, here's my current version: .foo {
display: grid;
@media (orientation: landscape) {
& {
grid-auto-flow: column;
}
@media (min-inline-size > 1024px) {
& {
max-inline-size: 1024px;
}
}
}
}
/* equivalent to
.foo { display: grid; }
@media (orientation: landscape) {
.foo {
grid-auto-flow: column;
}
}
@media (orientation: landscape) and (min-inline-size > 1024px) {
.foo {
max-inline-size: 1024px;
}
}
*/nested conditionals were already triggering nesting, so by putting one a conditional inside a conditional, the less to write, and still consistent with the syntax? |
|
Yeah, I see why your syntax is more consistent. It requires a selector ( .foo {
...
@media (orientation: landscape) {
...
@media (min-inline-size > 1024px) {
...
}
}
} |
[css-nesting-1]
This PR adds a section on nesting conditionals and provides a small set of examples to get the conversation started.
Example
fixes tabatkins/specs#56