使用相同的规则组合extend和mixin

Question

好！我有几个像这样的插件

%heading
%paragraph
%gutter

等等…

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

然后我想出了一个主意，把我所有的扩展也都作为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;
  }
}