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

@lilles 

> That's a whole different story and much simpler to implement. It would not allow you to apply @mixins across stylesheets, which might be a showstopper?

I've found a lot of people, including myself _sometimes_, would prefer to have variables act like references that are lexically scoped, as opposed to names than can be dynamically overridden based on HTML structure and CSS selectors applied to it.

I suspect this will even be more true of functions and mixins where the intent of the author is to import and use a specific function or mixin, not inherit the definition via a property.

This is one reason I filed https://github.com/w3c/csswg-drafts/issues/3714 to try to get to a place where we could make something like a named declaration, and export/import that to/from various places, ie importing rulesets into JS, or importing a mixin into another stylesheet.

The idea from #3714 applied to mixins might look something like:

`utils.css`:
```css
@mixin $center {
  display: grid;
  place-content: center;
  }
```

`component-a.css`:
```css
// assuming we could add `{name} from` support to `@import` syntax
@import {$center} from url("./utils.css");

body {
  @apply $center;
  /*
    display: grid;
    place-content: center;
  */
}
```

This would act a bit more like preprocessor mixins as well, and play nicely with static analyzers, minifiers, etc.

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


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

Received on Tuesday, 19 September 2023 01:47:31 UTC