W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2020

[csswg-drafts] [css-nesting] simpler embedding of media queries (#5805)

From: Brad Kemper via GitHub <sysbot+gh@w3.org>
Date: Fri, 18 Dec 2020 05:58:43 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-770591672-1608271122-sysbot+gh@w3.org>
bradkemper has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] simpler embedding of media queries ==
The spec has this for how to embed a MQ in a rule:

```
.foo {
  display: grid;

  @media (orientation: landscape) {
    & { 
      grid-auto-flow: column; 
    }
  }
}
```

But the unadorned ampersand and extra set of braces seems extraneous. It is incredibly useful, and much simpler, in SCSS to just write it like this for the commonest uses:

```
.foo {
  display: grid;

  @media (orientation: landscape) {
      grid-auto-flow: column; 
  }
}
```

In fact, embedded the MQ in the rule like that, without extra braces, is one of my favorite things about writing in SCSS. It just feels natural and familiar. Even in old vanilla CSS, I can't tell you the number of times I've forgotten to include the selector inside the MQ, when it was just an MQ for a single rule, written right after the bare rule. When the MQ is inside the rule, instead for the other was around, it is a joy to not have to write another selector and braces inside it. 

You don't have the garden path problem here. If the first non-white-space character after the opening brace of the nested MQ (or after a closing brace of a nested rule within that MQ) is not an ampersand or @ sign, then it is the beginning of a property for a declaration. 

I think there is nothing ambiguous about the following, and it is easier to write and read:

```
.btn {
  text-decoration: none;

  @media (max-width: 768px) {
      display: block; 

      &:hover { 
          box-shadow: 0 0 2px black inset;
      }
  }
}
```

So basically, the `& {` and `}` parts are assumed, as a shortcut for when you don't need any more than that, when you already have the braces from the nested @ rule. This should hold true for other nested @ rules too, such as `@supports`, etc.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5805 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 18 December 2020 05:58:45 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:24 UTC