Re: [csswg-drafts] [css-nesting] Syntax suggestion (#4748)

> Anyway, I just wanted to pull this option out of the dark in case it was overshadowed by the other three options. Would love to hear what people's opinions are on this one.

I assume that a simple child selector would not need the ampersand? If so, I love it.

To convert existing SCSS to this (assuming the SCSS author isn't an absolute _monster_ who mixes styles with nested selectors), one would simply add `@nest;` above the nested selectors, separating them from the styles themselves. If you think about it, it's kind of like a `<hr>` of sorts. Heck, I imagine some of the more visually-oriented authors might like to utilize CSS comments to make this more visible, eg:

```CSS
/* ------------------ */
@nest;
/* ------------------ */

/* or perhaps just */

@nest; /* ------------------ */
```

Perhaps for the sake of those cases where the CSS cannot be fully controlled by authors (restrictive CMSes or whatever), an optional `@endNest;` (`@tsen;`? 😆) terminator might be useful? 🤷‍♂️ 

---

The only problem I can see with this syntax is the inconsistency of how CSS uses `@______` code. Most often, it's:
```CSS
@something (parameters) {
    /* stuff */
}
```
...which, bringing this _right_ back around to the very starting post, is why I suggested the `@nest { /* selectors */ }` syntax in my very first post. 😉 

Granted, even the current spec of `@nest & .selector {...}` breaks that mold, so if that's ok, then I have no problem with LeaVerou's syntax. 👍 

-- 
GitHub Notification of comment by proimage
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4748#issuecomment-1233783364 using your GitHub account


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

Received on Thursday, 1 September 2022 06:05:21 UTC