Sass SCSS动态媒体查询创建

我正在用SCSS编写一个小型媒体查询框架。我的目标是从列表中动态创建媒体查询。我希望通过循环一个列表并使用

@mixin

和

@include

组合它们来实现这一点，这样您就可以基于列表中的每个变量组合

@include

@mixin pmq($vp){
  @if $vp == small{ 
    @media #{$_s} and ($w: $tw_frty){ 
      @content; 
    }
  }
}
@include pmq(small){
  body{
    width:100%;
  }
}

@each $vp in $viewports{
  @media #{nth($media-types, 8)} and ($vp){
    /**/
  }
}

CSS输出 @媒体屏幕和屏幕（宽度：15em）{ 身体{ 宽度：100%； } }

这将根据列表输出一组媒体查询

@mixin pmq($vp){
  @if $vp == small{ 
    @media #{$_s} and ($w: $tw_frty){ 
      @content; 
    }
  }
}
@include pmq(small){
  body{
    width:100%;
  }
}

@each $vp in $viewports{
  @media #{nth($media-types, 8)} and ($vp){
    /**/
  }
}

像这样

@media screen and (120em) {
  /**/
}
@media screen and (105em) {
  /**/
}
@media screen and (90em) {
  /**/
}
and so on... 

---

我一直在试图找出如何将两者结合起来，这样我就可以创建每个特定的

@include

我不确定是否需要创建一个自定义

@函数来实现这一点。任何有见识的人都将不胜感激。
我不理解这里的问题。动态组合媒体查询的作用是什么，使其不同于编写
@media（minwidth:$small）{…}
？是的，您可以编写
@media（minwidth:$small）{…}
，我宁愿编写
@media{$variable}{…}
。我的想法是将代码块作为
@content
放在一个列表中，然后循环输出。更新一个列表，循环完成其余的工作。看看我在做什么。请共享您希望得到的CSS代码，然后编写后续评论，以便我们注意到您的更新。首先，坦率地说，为特定视口设计是错误的（请参阅：和）。其次，如果您的mixin正在执行循环并使用
@content
，那么您的所有内容都将应用于每个媒体查询。