Transform LESS Mixin into Stylus Mixin

Question

I have the following Less Mixin which helps me to make responsive stuff:

.mobile-first(@minWidth, @rulesSet) {
    @media only screen and (min-width: @minWidth) {
        @rulesSet();
    }
}

I want to transform it into a Stylus Mixin, I have this code but is it not working:

.mobile-first($minWidth, $rulesSet) 
    @media only screen and (min-width: $minWidth) 
        $rulesSet();

I'm using it like this:

body
    font-family Helvetica, Arial, sans-serif
    font-size 100%
    line-height 1.5em
    color #2a2a2a
    -webkit-font-smoothing antialiased
    .min-width(1200px
        background-color pink

Hope you guys can help me.

Regards!.

Answer 1

You need to use block mixins here. Something like this:

// This mixin accepts any block of code if called with + sign.
// The provided block is stored in "block" variable
// and expanded if used inside an interpolation ({}).
mobile-first($minWidth)
  @media only screen and (min-width: $minWidth)
    {block}

body
  font-family Helvetica, Arial, sans-serif
  font-size 100%
  line-height 1.5em
  color #2a2a2a
  -webkit-font-smoothing antialiased
  // calling it with a block
  +mobile-first(1200px)
    background-color pink