SCSS动态媒体查询创建

Question

我正在用SCSS编写一个小型媒体查询框架。我的目标是从列表中动态创建媒体查询。我希望通过循环遍历列表并使用@mixin和@include编写它们来实现此目的，以便您可以根据列表中的每个变量组合@include。

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

CSS输出     @media屏幕和（宽度：15em）{       身体{         宽度：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我不确定我是否需要创建自定义@function为达到这个。任何见解都会很感激。