Replicating @mixin-content in a function mixin

[jkimbo]

I've been trying to replicate the functionality of my css mixin as a function mixin but I can't figure out how to the equivalent of @mixin-content;

@define-mixin respond-to $media {
  @if $media == mobile {
    @media only screen and (max-width: $break-small) { @mixin-content; }
  } @else if $media == tablet {
    @media only screen and (min-width: $break-small-plus) { @mixin-content; }
  } @else if $media == desktop {
    @media only screen and (min-width: $break-large-plus) { @mixin-content; }
  }
}

Any help would be really appreciated!

[ai]

For this task you should use https://github.com/postcss/postcss-custom-media

Because custom media is W3C standard

[jkimbo]

@ai for this specific mixin you're probably right however I think the more general question of how to replicate @mixin-content in a functional mixin is still valid.

[ai]

Your code looks fine. What exactly goes wrong?

[jkimbo]

@ai I was trying to create a functional JS mixin where I could insert the content of the mixin as part of the object being returned, like how @mixin-content works in css.

Anyway this question is purely academic now since I solved the issue that caused to me to look into converting the mixin to a functional JS one anyway.

[ai]

The @mixin-content; should works in this way.

@define-mixin test {
  .test {
    @mixin-content;
  }
}

@mixin test {
  color: black;
}

.test {
  color: black;
}

[jkimbo]

No I'm talking about a JS function mixin like so:

mixins: {
  'test': function() {
    return '.test': {
      // what do I do here??
    }
  }
}

[jkimbo]

Also I've just realised I've been writing functional when I mean function! Sorry about that.

[alexlafroscia]

I'm running into this same issue too... The documentation does not explain how to make a JavaScript mixin that supports @mixin-content the way a CSS mixin would. Unfortunately I need a conditional in my rule, so I can't just use CSS alone.