SASS 믹스인 매개변수

SASS의 믹스인의 중요한 특징은 매개변수로 변수를 받을 수 있다는 것입니다. 매개변수는 괄호 안에 기록하며, 변수가 여러 개인 경우 쉼표로 구분합니다.

다음 예제를 살펴보겠습니다:

@mixin active($color, $width) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow, 2px);
}

컴파일 결과:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dashed;
}

또한, 믹스인에는 기본값을 가진 매개변수를 전달할 수 있습니다:

@mixin active($color,  $width: 2px) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow);
}
div {
	@include active(yellow, 4px);
}

컴파일 후 다음과 같은 결과를 볼 수 있습니다:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dotted;
}
div {
	border-color: yellow;
	border-width: 4px;
	border-style: dotted;
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

@mixin simple-border($padding-top, $padding-bottom) {
	border: {
		padding-top: $padding-top;
		padding-bottom: $padding-bottom;
		color: green;
	}
}
p {
	@include simple-border(10px, 30px);
}

다음 코드의 컴파일 결과는 어떻게 될지 설명해 보세요:

@mixin simple-border($padding-top, $padding-bottom: 20px) {
	border: {
	padding-top: $padding-top;
	padding-bottom: $padding-bottom;
	color: green;
	}
}
p {
	@include simple-border(10px);
}