SCSS calculation with multiple values

Question

SCSS

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

CSS

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

Result

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

I wanted to create a simple function that execute the below result:

Expected result

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

Answer 1

Your function should be:

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

See live example.