如何将代码块传递给Stylus中的函数或mixin

Int*_*ist 5 css stylus sass

我正在从Sass转移到Stylus,我有很多mixins,我传入一个代码块,可以在mixin中访问@content.

例如...

@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;
    }
}
Run Code Online (Sandbox Code Playgroud)

我想将上面的代码转换成Stylus,但我的主要问题是我如何将代码块传递给mixin,因为Stylus似乎没有这个功能.

有替代解决方案吗?

任何帮助赞赏.

kiz*_*izu 6

最新版本的Stylus - 0.41.0可以实现这一点,上面的代码可以用Stylus编写,如下所示:

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
Run Code Online (Sandbox Code Playgroud)

  • 优秀!非常感谢你.我打算在不久的将来将BBC新闻从Sass转移到Stylus :-) (2认同)