组合扩展和混合使用相同的规则 [英] Combine extend and mixin in with same rules

问题描述

Okey！
我有几个像sass一样延伸的

Okey! I have couple of extends in sass like

%heading
%paragraph
%gutter

等等...

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

I want to reuse thouse in media queries, but that doesnt work. I know that.

然后我想出了所有我的扩展作为mixin的想法。所以当我想要他们在媒体查询我只是使用mixin。例如

Then i came up with the idea to have all my extends as mixins too. So when i want them in a media query i simply use mixin. for example

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

，因为我不想再次写我的所有规则。

and because i dont want to write all my rules again. How do i write my sass then?

我尝试了

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

but that didnt work.

推荐答案

任何想法如何使用？ >解决方案

解决方案

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

No, you can't combine them that way. You'll have to write a mixin that is invoked by your extend class and anything inside of a media query.

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

这篇关于组合扩展和混合使用相同的规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！