如何在SASS中把列表元素/混入参数乘常量后输出像素格式样式？

没问题，这事儿用SASS的列表遍历和可变参数就能轻松搞定！我给你写个直接能用的实现方案，附带详细解释：

首先，定义一个支持任意数量参数的margin混入：

@mixin margin($values...) {
  // 初始化一个空列表，用来存储处理后的像素值
  $processed-values: ();
  
  // 遍历每个传入的参数
  @each $num in $values {
    // 把数值乘以8，拼接px后缀，添加到新列表中
    $processed-values: append($processed-values, $num * 8 + px);
  }
  
  // 输出最终的margin属性
  margin: $processed-values;
}

怎么用？ #

就像你想要的那样直接调用就行：

.card {
  @include margin(1, 2, 4); // 对应上、右、下三个方向的margin
}

.button {
  @include margin(5, 4); // 对应上下、左右两个方向的margin
}

编译后的CSS结果 #

完全符合你的预期：

.card {
  margin: 8px 16px 32px;
}

.button {
  margin: 40px 32px;
}

可选优化：处理0值 #

如果希望传入0的时候直接输出0而不是0px（更符合CSS最佳实践），可以给混入加个小判断：

@mixin margin($values...) {
  $processed-values: ();
  @each $num in $values {
    @if $num == 0 {
      $processed-values: append($processed-values, 0);
    } @else {
      $processed-values: append($processed-values, $num * 8 + px);
    }
  }
  margin: $processed-values;
}

这样调用@include margin(0, 3)就会输出margin: 0 24px;，更干净规范。

内容的提问来源于stack exchange，提问作者Hammy1409