บล็อกเนื้อหาในมิกซ์อินของ SASS

สำหรับการส่งบล็อกของสไตล์ภายใน มิกซ์อิน เราใช้คำสั่ง @content, ซึ่งตำแหน่งนี้จะเป็นที่ที่สไตล์ที่เราต้องการจะไปปรากฏ

ลองพิจารณาตัวอย่าง:

@mixin active {
	* div {
		@content;
	}
}

@include active {
	#block {
		color: red;
	}
}

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

* div #block {
	color: red; 
}

จำเป็นต้องรู้ว่าหาก เราระบุคำสั่ง @content มากกว่าหนึ่งครั้งหรือภายในลูป บล็อกของสไตล์ก็จะถูกเรียกใช้ จำนวนครั้งเท่านั้น

@mixin active {
	div {
		@content;
	}
navbar {
		@content;
	}
}
@include active {
	#block {
		color: red;
	}
	button {
		color:green;
	}
}

หลังการคอมไพล์เราจะเห็น:

div #block {
	color: red; 
}
div button {
	color: green; 
}

navbar #block {
	color: red; 
}
navbar button {
	color: green; 
}

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

@mixin super-link {
	a {
		@content;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

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

@mixin super-link {
	a {
		@content;
	}
	a .primary-link{
		@content;
		font-weight: bold;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

สมมติว่าคุณมีมิกซ์อินต่อไปนี้:

@mixin colors {
	...
}

ใช้คำสั่ง @content ตั้งค่าสีฟอนต์เป็นสีน้ำเงิน และการขีดเส้นใต้แบบเป็นคลื่น สำหรับลิงก์ทั้งหมดที่เกี่ยวข้อง กับ #primary