css - 将extend和mixin与相同的规则结合起来

Question

好吧！我有几个像 sass 一样的扩展

%heading
%paragraph
%gutter

等等...

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

然后我想出了将我所有的扩展都作为 mixins 的想法。因此，当我希望它们出现在媒体查询中时，我只需使用 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;
  }
}