TIL | SCSS Variable Arguments(가변 인수)

때때로 입력할 인수의 개수가 불확실한 경우가 있다.
그럴 경우 Variable Arguments(가변 인수)를 사용할 수 있다.
Variable Arguments(가변 인수)는 매개변수 뒤에 ...를 붙인다.

@mixin mixinname($매개변수...) {
  style;
}

@include mixinname(인수A, 인수B, 인수C);

SCSS

// 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-value)는 인수의 개수 상관없이 받는다.
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background-color: $bg-values;
}

div {
  // 위에 mixin(bg)에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달한다.
  @include bg(
    100px;
    200px;
    url("/images/a.png") no-repeat 10px 20px,
    url("/images/b.png") no-repeat,
    url("/images/c.png")
  );
}

⬇️
CSS

div {
  width: 100px;
  height: 200px;
  background-color: url("/images/a.png") no-repeat 10px 20px,
                    url("/images/b.png") no-repeat,
                    url("/images/c.png");
}

반대로 Variable Arguments(가변 인수)를 전달할 값으로 사용하는 경우이다.
SCSS

@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}

div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}

span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}

a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

⬇️
CSS

div {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-family: sans-serif;
}

span {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  font-family: sans-serif;
}

a {
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  font-family: monospace;
}