WEB/SASS,SCSS
[SCSS] 가변 인수 / 입력할 인수가 불확실할때 사용 /...
자바칩 프라푸치노
2021. 4. 20. 10:58
때때로 입력할 인수의 개수가 불확실한 경우가 있다.
그럴 경우 매개변수 뒤에 ...을 붙인다.
순서대로 인수가 들어가는데
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>
728x90