使用 sass @mixin 和 @content 时出现多个媒体查询问题

Question

有人可以告诉我以下问题出在哪里吗？我在@Mixin 中使用@content 获得多个媒体查询...

我已经为媒体查询创建了@mixin：

@mixin tablet {
@media only screen and (max-width:1024px){
    @content;
}
}

然后像这样实现：

.container{
width:1080px; 
margin: 0 auto;

@include tablet{width:940px;}
}

#slider{
width:800px; height:500px;

@include tablet{width:470px; height:470px;}
}

但是，在编译时它会为我的每个 css 样式创建一个新的媒体查询：

@media only screen and (max-width: 1024px) {
div#slider {
width: 470px;
height: 470px; } 
}

@media only screen and (max-width: 1024px) {
.container {
width: 940px; } }

我希望所有 css 样式都在一个媒体查询中...而不是为每个样式创建新的媒体查询...使我的代码变得臃肿。

谁能告诉我这里做错了什么。

非常感谢

Answer 1

这是 Sass 的预期行为。如果你担心膨胀，我建议你看看这个post：https://benfrain.com/inline-or-combined-media-queries-in-sass-fight/它基本上表明膨胀最终可以忽略不计，即使对于大型项目也是如此。

我有两个建议：

1) 来自这个post:

https://medium.com/front-end-developers/the-solution-to-media-queries-in-sass-5493ebe16844#.z9osb8t01

第 1 步。制作一个 media-queries.scss 文件，它只在一个 Sass 文件

中包含所有媒体查询

// small screen size (sm)

@media (min-width: 801px) {

}

// medium screen size (md)

@media (min-width: 992px) {

}

第 2 步。为每个组件创建一个响应式 mixin，以便在 media-queries.scss 文件中定义的断点内调用。

.banner {
  text-align: center;
  font-size: 14px;
}

// called in media-queries.scss

@mixin banner--sm() {
  .banner {
    font-size: 20px;
  }
}

@mixin banner--md() {
  .banner {
    text-align: left;
    font-size: 25px;
  }
}

步骤 3. 在 media-queries.scss

中调用 mixins

// small screen size (sm)

@media (min-width: 801px) {
  @include banner--sm();
}

// medium screen size (md)

@media (min-width: 992px) {
  @include banner--md()
}

2) 使用媒体查询组合器

• 咕噜：grunt-combine-media-queries

• Gulp: gulp-combine-media-queries

• Webpack: postcss-move-media