将extend和mixin与相同的规则结合起来答案

【问题标题】：Combine extend and mixin in with same rules将extend和mixin与相同的规则结合起来
【发布时间】：2013-05-11 02:02:08
【问题描述】：

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

%heading
%paragraph
%gutter

等等……

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

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

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

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

我试过了

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

但这没有用。

任何想法如何使用它？

【问题讨论】：

标签： css sass extend mixins

【解决方案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;
  }
}

【讨论】：