How to pass a code block to a function or mixin in Stylus

Question

I'm moving from Sass to Stylus and I have lots of mixins where I pass in a code block which is accessible inside the mixin as @content.

For example...

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fix-mqs {
        // ...and if we should apply these rules...
        @if $fix-mqs >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media all and (min-width: $width) {
            @content;
        }
    }
}

@include respond-min($mq-group2) {
    & {
        border: 1px solid green;
    }
}

I want to convert the above code into Stylus, but my main problem so far as been how I pass a code block into the mixin as Stylus doesn't appear to have that feature.

Is there an alternative solution?

Any help appreciated.

Daily

you currently have to create a mixin and pass it as an argument – Sayre

Answer 1

This become possible with the latest release of Stylus — 0.41.0, the code above could be written in Stylus like this:

respond-min($width)
  // If we're outputting for a fixed media query set...
  if $fix-mqs is defined
    // ...and if we should apply these rules...
    if $fix-mqs >= $width
      // ...output the content the user gave us.
      {block}
  else
    // Otherwise, output it using a regular media query
    media = 'all and (min-width: %s)' % $width
    @media media
      {block}

+respond-min($mq-group2)
  border: 1px solid green

Viola

Excellent! Thank you very much. I intend on shifting BBC News from Sass over to Stylus in the near future :-) – Daily

Answer 2

It's worth noting that there are currently open issues regarding passing multiple arguments into @media queries. Also mixins cannot be used as selectors.

Hurlee