Tham số của Mixins trong SASS

Một đặc điểm quan trọng của mixins trong SASS là chúng có thể nhận các biến làm tham số, được viết bên trong dấu ngoặc tròn và, nếu có nhiều biến, thì chúng được phân tách bằng dấu phẩy.

Hãy xem xét ví dụ sau:

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

Kết quả biên dịch:

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

Ngoài ra, có thể truyền giá trị mặc định cho các tham số trong mixins:

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

Sau khi biên dịch chúng ta sẽ thấy:

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

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

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

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

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