Parameter Mixin dalam SASS

Fitur penting dari mixin dalam SASS adalah mereka dapat menerima variabel dalam parameter, yang ditulis di dalam tanda kurung dan, jika ada beberapa variabel, maka mereka dipisahkan dengan koma.

Perhatikan contoh berikut:

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

Hasil kompilasi:

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

Selain itu, nilai default dapat diteruskan ke parameter mixin:

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

Setelah kompilasi kita akan melihat:

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

Jelaskan, apa hasil kompilasi dari kode berikut:

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

Jelaskan, apa hasil kompilasi dari kode berikut:

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