Parameter Mixin dalam SASS

Ciri penting mixin dalam SASS ialah mereka menerima pembolehubah sebagai parameter, yang ditulis dalam kurungan bulat dan, jika terdapat beberapa pembolehubah, mereka dipisahkan dengan koma.

Pertimbangkan 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 lalai boleh dihantar kepada parameter mixin:

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

Selepas kompilasi, kita akan lihat:

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

Terangkan apakah hasil kompilasi bagi kod 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 );
}

Terangkan apakah hasil kompilasi bagi kod 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);
}