如何在 sass 中创建和迭代媒体列表？

Question

早上好。我目前正在尝试为 sass 编写一个相当简单的 mixin 函数。它所要做的就是接受视口/媒体混合列表、要应用的因素列表和填充。结果是所有视口的 css 填充定义。所以基本上它会变成这样：

.test {
    $factors: 1 2 3 4 5;
    $paddings: 1px 0 5px 0;
    @include media-paddings($all-medias, $factors, $paddings;
}

进入这个：

@media (media-1-def) {
    .test {
        padding: 1px 0 5px 0;
    }
}

@media (media-2-def) {
    .test {
        padding: 2px 0 10px 0;
    }
}
.
.
.

我目前在 sassmeister 的测试可以在 here 找到。

鉴于我刚开始使用 sass，我仍然遇到以下问题：

1) 如何在第 52 行创建媒体混合列表？ 2) 如何在第 27 行的循环中调用它们？ 3) 如何在一次迭代中建立一个多变量填充？意思是不使用我笨拙的 if 构造 @ 第 33 行之后也没有两个循环，首先生成变量，然后将变量添加到填充中。

我知道，对于所有你来说，这似乎是微不足道的，所以如果你碰巧知道好的教程或其他可以学习的资源，那么这些也是很有价值的（搜索它们，但是在正确搜索时大脑空指针的经典案例-单词）。

Answer 1

我没有回答您的问题，而是想出了一个希望更简单的解决方案。随时就我的解决方案提出问题。

DEMO

get-multi-medias 是 mixin，get-padding 是辅助函数

$hd: 1920px;
$ld: $hd - 1px;

@function get-padding($pads/* is a list*/, $factor) {
  // empty list
  $final-padding: ();

  // multiply factor times each value in padding list
  @each $pad in $pads {
    // append updated val to the $final-padding
    $final-padding: append($final-padding, ($pad * $factor));
  }

  @return $final-padding;
}

@mixin get-multi-medias($medias /*is a map*/, $padding-vals/* is a list*/, $factors/* is a list*/) {
  @each $range, $breakpoint in $medias {
    // get current index...
    $index: index($medias, $range $breakpoint);

    @media (#{$range}-width: $breakpoint) {
      // ... to find the factor, which is passed to get-padding
      padding: get-padding($padding-vals, nth($factors, $index));
      @content; /* only if you want to pass more stuff to the mixin */
    }
  }
}

像...一样使用

.with-xtra-content {
  $factors: 1 2;
  $padding: 1px, 2px, 3px;
  $medias: (max: $hd, min: $ld);
  @include get-multi-medias($medias, $padding, $factors) {
   /*pass xtra content*/
  };
}

.no-xtra-content {
  $factors: 1 2;
  $padding: 1px, 2px, 3px;
  $medias: (max: $hd, min: $ld);
  @include get-multi-medias($medias, $padding, $factors);
}