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

有人能告诉我下面的问题是什么吗。我正在使用@content in@Mixin获取多个媒体查询

我为媒体查询创建了@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样式都只出现在一个媒体查询中。。。而不是为每个。。。膨胀了我的代码

有人能告诉我我做错了什么吗

---

非常感谢

这是Sass的预期行为。如果你担心膨胀，我建议你看看这篇文章：它基本上表明膨胀最终可以忽略不计，即使是大型项目

我有两个建议：

1） 从本帖：

第1步。制作一个media-querys.scss文件，该文件只在一个Sass文件中保存所有媒体查询

// small screen size (sm)

@media (min-width: 801px) {

}

// medium screen size (md)

@media (min-width: 992px) {

}

第2步。为要在media-querys.scss文件中定义的断点内调用的每个组件创建响应性mixin

.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步。在媒体查询中调用mixin。scss

// small screen size (sm)

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

// medium screen size (md)

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

2） 使用媒体查询组合器

• 咕噜声：

• 大口喝：

• 网页：

---

感谢您抽出时间回答问题Nelson！：-）