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

Question

我正在从 Sass 迁移到 Stylus，并且我有很多 mixin，我在其中传递了一个代码块，该代码块可以在 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;
    }
}

我想将上面的代码转换为 Stylus，但我的主要问题是如何将代码块传递到 mixin，因为 Stylus 似乎没有该功能。

有替代解决方案吗？

任何帮助表示赞赏。

Answer 1

这在最新版本的 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

Answer 2

值得注意的是，目前存在关于将多个参数传递给@media 查询的未解决问题。mixins 也不能用作选择器。