মিক্সিনে কন্টেন্ট ব্লক 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-এর অন্তর্গত সব লিঙ্কের জন্য ফন্টের রঙ নীল এবং তরঙ্গায়িত আন্ডারলাইন সেট করুন।