Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

sass

stylus

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.

like image 887
Integralist Avatar asked Jul 11 '13 09:07

Integralist


1 Answers

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
like image 181
kizu Avatar answered Nov 01 '22 12:11

kizu