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的预期行为。如果你担心膨胀，我建议你看一下这篇文章：https://benfrain.com/inline-or-combined-media-queries-in-sass-fight/它基本上表明，即使对于大型项目，膨胀也可以忽略不计。

我有两点建议：

1）从这篇文章：

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.为要在media-queries.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.调用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()
}

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

1 个答案:

1）从这篇文章：

2）使用媒体查询组合器