Re: [csswg-drafts] Proposal: Custom CSS Functions & Mixins (#9350)

This is not directly related to this issue. My intention in this comment is to address the use case mentioned by @jpzwarte.

---

<details><summary>Re @jpzwarte's media query <a href="#issuecomment-2748692840">related comment</a> &nbsp;&nbsp;<kbd>expand to view quoted comment</kbd></summary>
<p>

> > To do this with a function, you would need to pass in the values as arguments.
> 
> Like this? Or am i daydreaming now?
> 
> ```css
> .button-bar {
>   display: flex;
>   gap: 1rem;
>   
>   --mq(mobile, {
>     flex-direction: column;
>   })
> }
> ```

</p>
</details>

This is the intended purpose of `@custom-media`, a separate feature that is currently under review and getting some attention on Chromium. Please go comment/upvote that feature here: https://issues.chromium.org/issues/40781325

The above example from @jpzwarte would look like this:

```css
/* @custom-media defined at root */
@custom-media --mobile (width <= 600px);

/* styles defined elsewhere */
.button-bar {
  display: flex;
  gap: 1rem;
  
  @media (--mobile) {
    flex-direction: column;
  }
}
```

This^ is very real and not a daydream 😉

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


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

Received on Tuesday, 3 June 2025 15:47:45 UTC