Re: [csswg-drafts] [css-nesting-1] initial idea for nested conditionals (#5645)

@argyleink very useful idea at first glance! <br>
Currently this is not in spec, as i see from [tabatkins/specs#56](https://github.com/tabatkins/specs/issues/56)
```css
.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.
```css
.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 `@media` inside `&`? 
For me it seems fully valid, because `&` refers to parent selector and from your example we could nest media inside a selector
```css
.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 `@media` nesting. Should it work?
```css
.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;
  }
}
```

-- 
GitHub Notification of comment by fromaline
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/pull/5645#issuecomment-717767668 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 28 October 2020 08:04:34 UTC