sass - SCSS 动态媒体查询创建

Question

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

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

CSS 输出 @media screen and (width: 15em){ 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我不确定我是否需要创建一个自定义@function来实现这一点。任何见解将不胜感激。