ขอบเขตของตัวแปรและบล็อกเนื้อหาใน SASS

เมื่อส่งบล็อกเนื้อหาเข้าไปในมิกซิน ขอบเขตของบล็อกเหล่านั้นจะถูกกำหนดโดยตำแหน่งที่ตั้งของบล็อกนั้น ๆ โดยตรง ไม่ใช่โดยมิกซิน ดังนั้น เราจึงไม่สามารถใช้ตัวแปรเฉพาะที่ภายในมิกซินในบล็อกเนื้อหาที่ส่งผ่านได้ ซึ่งบล็อกเนื้อหาจะทำงานได้เฉพาะกับตัวแปรระดับโลกเท่านั้น

พิจารณาตัวอย่างต่อไปนี้:

$size: 14px;
	@mixin sizes ($size: 20px) {
		font-size: $size;
		padding: $size;
		@content;
}

.navbar {
	@include sizes {
		margin: $size;
	}
}

ผลลัพธ์หลังจากคอมไพล์:

.navbar {
	font-size: 20px;
	padding: 20px;
	margin: 14px; 
}

บอกหน่อยว่าผลลัพธ์หลังจากคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:

$color: yellow;

@mixin links ($color: red) {
	background: $color;
	@content;
}

บอกหน่อยว่าผลลัพธ์หลังจากคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:

$color: yellow;
$size: 10px;

@mixin links ($color: red, $size: 12px) {
	background-color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		box-shadow: $color;
		padding: $size;
	}
}

บอกหน่อยว่าผลลัพธ์หลังจากคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:

$color: green;
$size: 6px;

@mixin links ($color: red, $size: 10px) {
	color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		border-color: $color;
		margin: $size;
	}
}

#active{
	@include links{
		background-color: $color;
		padding-top: $size;
		padding-bottom: $size * 2;
	}
}