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

@mirisuzanne With the mixins-as-functions approach, would we still also be able to apply a mixin at the top-level of a property, or would we have to explicitly name the desired properties?

My usual use case for mixins is creating a bucket of styles to bulk apply to other rules, as is common in SCSS (and LESS iirc), like this example from your explainer:
```postcss
@mixin --center-content {
  display: grid;
  place-content: center;
}

.page {
  @apply --center-content;
}
```

Another question I think this begs is if @apply could also be used here as a means of spreading groups of properties, native and custom alike.

Simpler use cases without parameters could look as simple as this:
```postcss
:root {
  --center-content: {
    display: grid;
    place-content: center;
  };
}

.page {
  @apply --center-content;
}
```

Essentially, @apply will attempt to spread any group of properties. @mixin, whether defined with @mixin or not, though using @mixin would provide extra capabilities like parameters, default values, etc.

While not a common use case, something like this could also be done inline:
```postcss
.page {
  @apply {
    display: grid;
    place-content: center;
  };
}
```

I wonder if this could provide more flexibility for simpler use cases. There may be other factors here I’m not considering, in which case @mixin being required for use with @apply may be a reasonable limitation.

I think a primary need would be the ability to @apply to receive all resulting properties by default unless specific properties are named. I do agree that the ability to pull specific properties from a mixin would be powerful and help to avoid naming collisions still desiring some of the effects of a particular mixin.

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


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

Received on Wednesday, 10 April 2024 18:11:35 UTC