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

Question

早上好。我目前正在尝试为 sass 编写一个相当简单的 mixin 函数。它所要做的就是接受视口(viewport)/媒体混合列表、要应用的因素列表和填充。结果是成为所有视口(viewport)的 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 行，也不要使用两个循环，首先生成变量，然后将变量添加到填充中。

我知道，对于所有的破解者来说，这一定看起来微不足道，所以如果您碰巧知道好的教程或其他可供学习的资源，那么它们也很有值(value)(搜索过它们，但正确搜索时大脑空指针的经典案例-词)。

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);
}