sass - SCSS 動的メディア クエリの作成

Question

私は、SCSS で小さなメディア クエリ フレームワークを作成中です。私の目標は、リストから動的にメディア クエリを作成することです。@mixinリストをループしてandを使用して構成することでこれを実現したいと思います。これにより、リスト内の各変数に基づいて@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どんな洞察も感謝します。