具有多个值的 SCSS 计算

【问题标题】：SCSS calculation with multiple values具有多个值的 SCSS 计算
【发布时间】：2015-07-14 20:00:06
【问题描述】：

SCSS

@function space($parent-width, $width...) {
  @return $width + $parent-width;
}

CSS

.box {
  padding: space(2px, 25px 40px 50px 60px);
}

结果

.box {
  padding: 25px 40px 50px 60px2px;
}

我想创建一个执行以下结果的简单函数：

预期结果

.box {
  padding: 27px 42px 52px 62px;
}

【问题讨论】：

标签： css sass mixins

【解决方案1】：

你的功能应该是：

@function space($parent-width, $width...) {
    $result: ();   
    @for $i from 1 through length($width) {
      $result: append($result, nth($width, $i)+$parent-width);
    }
    @return $result;
}

见live example。

【讨论】：

完美...但是您可以稍微修改一下您的代码吗？我想使用这样的功能 .box { padding: space(2px, 25px 40px 50px 60px);我不想在每个宽度之间使用逗号...如果 $parent-width 为空，我也希望添加一个 $base-parent-width 和 $width。意味着如果我像这样使用 $base-parent-width: 4px; .box { 填充：空间（25px 40px）； } 我预期的 CSS 应该是 .box {padding: 29px 40px;}
第一个问题：如果你定义的宽度参数不是一个 arglist 而是一个列表，你可以跳过函数调用中的逗号。我不认为你的第二个愿望可以完全这样实现，但你可以在函数签名中定义 parent-width 参数的默认值。 See modified example here.