Re: [csswg-drafts] [selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries (#6247)

Getting back to the problem of code duplication, could we do something similar to SASS's mixin? 

Instead of setting a Custom Property flag and using container queries to style, you could add a block of code to a ruleset.
```css
/* With flag */
.dark { --mode: dark; }
@media(prefers-color-scheme: dark) { --mode: dark; }

@container(style(--mode: dark)) {
  /* rules */
}

/* With mixin */
@mixin dark-mode {
  /* rules and nested rules that will map to the selector that includes the mixin */
}

.dark { @includes dark-mode }
@media(prefers-color-scheme: dark) {
  @includes dark-mode 
}
```
It doesn't have to be as full-featured as SASS's mixin, just the code reuse and dynamic scoping would be enough.


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


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

Received on Saturday, 13 May 2023 03:21:51 UTC