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

I'm looking at `@function` and `@if` to see if it could be used instead of [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) (which no vendor has implemented so far).

So far, i've got this:

```css
@property --mq-breakpoint {
  syntax: 'mobile | tablet | desktop';
  inherits: false;
}

@function --mq(--mq-breakpoint) {
  @if (style(--mq-breakpoint: mobile)) {
    @media (width <= 600px) {
      result: @content;
    }
  }

  @if (style(--mq-breakpoint: tablet)) {
    @media (width > 600px) and (width <= 900px) {
      result: @content;
    }
  }

  @if (style(--mq-breakpoint: desktop)) {
    @media (width > 900px) {
      result: @content;
    }
  }
}
```

Which could be used as: 

```css
.button-bar {
  display: flex;
  gap: 1rem;

  --mq(mobile) {
    flex-direction: column;
  }
}
```

So the main difference afaics is that `result: @content` doesn't seem to be in the spec? Is there a reason for that?

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


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

Received on Monday, 24 March 2025 10:29:43 UTC