Question

我正在从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;
    }
}

我想将上面的代码转换成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查询的未解决问题。 mixin也不能用作选择器。

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

2 个答案: