使用相同的规则组合扩展和混合

Question

好的！我在 sass 中有几个扩展，比如

%heading
%paragraph
%gutter

等等...

我想在媒体查询中重用 thouse，但这不起作用。我知道。

然后我想出了将我所有的扩展也作为 mixin 的想法。所以当我想在媒体查询中使用它们时，我只需使用 mixin。例如

.my-widget {
    @extend %gutter;
    @media.... {
        @include gutter-other;
    }
}

因为我不想再写我所有的规则。那我该怎么写我的sass呢？

我试过

%my-extend, @mixin my-extend {
   ...
}

但这没有用。

任何想法如何处理这个？

Answer 1

不，你不能这样组合它们。您必须编写一个由您的扩展类和媒体查询中的任何内容调用的 mixin。

@mixin my-extend {
    background: yellow;
}

%my-extend {
    @include my-extend;
}

.foo {
    @extend %my-extend;
}

.bar {
    @extend %my-extend;
}

.baz {
    @media (min-width: 30em) {
        @include my-extend;
    }
}

输出：

.foo, .bar {
  background: yellow;
}

@media (min-width: 30em) {
  .baz {
    background: yellow;
  }
}