[csswg-drafts] [css-mixins] Allow mixins/functions to be called via custom properties (#10006)

sorvell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-mixins] Allow mixins/functions to be called via custom properties ==
Allow functions and mixins to be called via custom properties to support some additional interesting use cases. The syntax in the [current proposal](https://github.com/w3c/csswg-drafts/issues/9350) seems like it might need a little tweaking to support this. Here's a rough sketch that needs a lot more fleshing out if this idea doesn't have some obvious fatal flaw.

**Basic Idea**

Introduce a way to "call" mixins/functions, say, using a built-in function called `call` that accepts `var`:

```css
@mixin --hover-focus(--hover; --focus;) {
  &:hover {
    @apply call(var(--hover), 2);
  }
  &:focus {
    @apply call(var(--focus), 4;
  }
}

@function --shadow(--x: 0; --y: 0; --color: black; --calc-blur;) {
  @return var(--x) var(--y) call(var(--calc-blur, --x, --y)) var(--color);
}
```

**Use Cases**

* more robust composition of effects (the contrived examples above hint at this).
* passing nested content to mixins as [noted in the explainer](https://css.oddbird.net/sasslike/mixins-functions/#passing-nested-content-to-mixins).
* as custom properties, mixins and functions could inherit down the tree to be applied elsewhere in the DOM, even cross-scope in Shadow DOM.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10006 using your GitHub account


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

Received on Tuesday, 27 February 2024 02:37:36 UTC