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）如何在一次迭代中建立多变量填充？意思是不使用我的笨拙如果构造@ lines 33跟随两个循环，首先生成变量，然后将变量添加到填充。

我知道，对于你所有的裂缝，这看起来似乎微不足道，所以如果你碰巧知道好的教程或其他来源可以学习，那些也很有价值（搜索它们，但正确搜索的经典案例是脑无效指针） -word）。

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中的媒体列表？

1 个答案: