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

Question

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

我知道，对于你们这些破解者来说，这一定看起来微不足道，所以如果您碰巧知道好的教程或其他可以学习的资源，那么这些也很有价值（搜索过它们，但是 brain-nullpointer 的经典案例正确的搜索词）。

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

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

How to create and iterate over a list of media in sass?

css

sass

mixins