Re: [csswg-drafts] [css-mixins-1] Alternatives to using a scoping rule (#13727)

Doesn't work, unfortunately. The problem is that, when an argument passed to the mixin has element-specific behavior, we want to resolve it at the point of `@apply` on the applying element, and then have a consistent value for it no matter where it's used in the result.

That is:

```css
@mixin --foo(--arg <length>) {
  @result {
    &, & > figure, & + p {
      width: var(--arg);
    }
  }
}
div {
  @apply --foo(10em);
  font-size: 10px;
}
div + p {
  font-size: 20px;
}
div > figure {
  font-size: 30px;
}
```

The `div` gets a 100px width regardless. Under your proposal, the `figure` would *also* get a 100px width, as it can inherit the value from its parent `div` and its `font-size` doesn't matter. But the `p` would get a `200px` width, as it can't inherit so it falls back to resolving the `10em` against itself. That's pretty confusing! 

The current spec just prevents you from styling the `p` *at all* from within this mixin, so you don't run into the same problem. If you *do* want to style both elements, you have to lift the `@apply` up to their common parent, at which point we resolve the `em` length against that parent and all three styled elements again get the same width. Or you switch to a macro, which can't take arguments at all, and it's much more clear that you're resolving values locally:

```css
@macro --foo {
  &, & > figure, & + p {
    width: 10em; /* this *obviously* relies on each element's font-size */
  }
}
div {
  @apply --foo(10em);
  font-size: 10px;
  /* width: 10em; == 100px */
}
div + p {
  font-size: 20px;
  /* width: 10em; == 200px */
}
div > figure {
  font-size: 30px;
  /* width: 10em; == 300px */
}

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


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

Received on Wednesday, 25 March 2026 18:56:39 UTC