मिक्सिन में सामग्री ब्लॉक 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 से संबंधित सभी लिंक्स के लिए फॉन्ट का नीला रंग और वेवी अंडरलाइन सेट करें।