use CSS variable with mixins

[amcc]

it would be great to use CSS variables with mixins, is this possible. I'm trying to do something like this:

:root {
  --tablet-size: 48em;
  --desktop-size: 60em;
}

@define-mixin tablet {
  @media screen and (min-width: var(--tablet-size)) {
    @mixin-content;
  }
}

@define-mixin desktop {
  @media screen and (min-width: var(--desktop-size)) {
    @mixin-content;
  }
}

This does not work, however putting the em value directly into the mixin does work

The goal is to have a minimal set of plugins that i need to install and leverage in built variables as much as possible

[ai]

You can't use CSS Custom Properties in media queries according to CSS spec.

It is not related with mixin.

[amcc]

thanks - was also trying to do this:

@define-mixin break $size {
  @media screen and (min-width: $size) {
    @mixin-content;
  }
}

then using like so:

.myrule {
  background-color: #ff00ff;
  @mixin break var(--tablet-size) {
    background-color: #ffff00;
  }
}

This also doesn't work, but apparently this does: https://stackoverflow.com/questions/75592591/postcss-and-breakpoint-mixins, though requires postcss-simple-vars and postcss-map-get - which i want to avoid

[ai]

You just can’t use CSS Custom Properties in media query. @mixin break var(--tablet-size) will again put CSS Custom Properties in media query which is not allowed by spec.

[amcc]

thanks for the help, makes sense now - so the only way around is to use postcss-simple-vars or something similar