Question

奥基！我有几个延伸，如

%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;
  }
}

将extend和mixin结合使用相同的规则

1 个答案: