SASS에서의 가변 매개변수

믹스인이나 함수가 알 수 없는 수의 매개변수를 받아야 하는 상황이 있습니다. SASS 언어에는 "가변 매개변수" 또는 함수나 믹스인에서 마지막으로 지정되고 전달된 나머지 모든 매개변수를 목록으로 묶는 매개변수를 전달하는 기능이 있습니다.

이러한 매개변수 뒤에는 생략 부호를 넣어야 합니다. 다음 예를 살펴보겠습니다:

@mixin box-content-padding($padding...) {
	-moz-box-content-padding: $padding;
	-webkit-box-content-padding: $padding;
}
div {
	@include box-content-padding(0px 4px 5px 2px);
}

컴파일 결과:

div {
	-moz-box-content-padding: 0px 4px 5px 2px;
	-webkit-box-content-padding: 0px 4px 5px 2px;
}

함수나 믹스인의 가변 매개변수에 명명된 매개변수도 전달할 수 있습니다. 이에 접근하기 위해 keywords($args) 함수를 사용하며, 이 함수는 이름($ 기호 없이)을 값에 대한 매핑으로 반환합니다.

@mixin common-colors($text-color, $background, $shadow) {
	color: $text-color;
	background-color: $background;
	box-shadow: $shadow;
}

$values: white, green, grey;

.primary {
	@include common-colors($values...);
}

$value-map: (text-color: black, background: grey, shadow: green);

.secondary {
	@include common-colors($value-map...);
}

컴파일 후 결과는 다음과 같습니다:

.primary {
	color: white;
	background-color: green;
	box-shadow: grey;
}

.secondary {
	color: black;
	background-color: grey;
	box-shadow: green;
}