때때로 입력할 인수의 개수가 불확실한 경우가 있다.
그럴 경우 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;
}