具有多个值的 SCSS 计算

Question

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

Answer 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。

具有多个值的 SCSS 计算

SCSS calculation with multiple values

css

sass

mixins