[SCSS] 가변 인수 / 입력할 인수가 불확실할때 사용 /...

때때로 입력할 인수의 개수가 불확실한 경우가 있다.

그럴 경우 매개변수 뒤에 ...을 붙인다.

순서대로 인수가 들어가는데 

3개를 받겠다고 했는데 5개를 넣었다.

원래는 오류가 나는데 bg옆에 ...을 붙였으니 bg라는 변수가 그 다음 것들을 다 받는다.

---

// 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $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")
  );
}

<scss>

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

<css>