एसएएसएस में मिक्सिन का उपयोग

मिक्सिन घोषित करने के बाद हम इसे @include निर्देश के साथ कॉल करते हैं, जिसमें अनिवार्य रूप से मिक्सिन का नाम शामिल होना चाहिए। इसमें वैकल्पिक रूप से पैरामीटर और स्टाइल भी हो सकते हैं। उदाहरण पर विचार करें:

@mixin mix{
	width: 100px;
	height: 100px;
}
div {
	@include mix;
	padding: 4px;
	margin-top: 10px;
}

कंपाइलेशन का परिणाम:

div {
	width: 100px;
	height: 100px;
	padding: 4px;
	margin-top: 10px;
}

मिक्सिन को डॉक्यूमेंट के रूट में भी कॉल किया जा सकता है, लेकिन केवल तब, जब वे नियमों का वर्णन नहीं करते हैं और उनमें पैरेंट का कोई संदर्भ नहीं है। निम्नलिखित उदाहरण देखें:

@mixin active {
	p {
		color: #161618;
		background-color: red;
	}
}
@include active;

कंपाइलेशन के बाद हम देखेंगे:

p {
	color: #161618;
	background-color: red;
}

बताएं कि निम्नलिखित कोड के कंपाइलेशन का परिणाम क्या होगा:

@mixin font {
	font-family:'Courier New', Courier, monospace;
	font-size: 12px;
}

#product-card {
	@include font;
	color: #090957;
	font-weight: 600px;
}

बताएं कि निम्नलिखित कोड के कंपाइलेशन का परिणाम क्या होगा:

@mixin style {
	color:#090957;
}

button, link {
	@include style;
	font-size: 10px;
	padding: 4px;
}

बताएं कि निम्नलिखित कोड के कंपाइलेशन का परिणाम क्या होगा:

@mixin active-text {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	color: blue;
}

#product-card, .active, .content {
	@include active-text;
	padding: 4px;
}

बताएं कि निम्नलिखित कोड के कंपाइलेशन का परिणाम क्या होगा:

@mixin size {
	font-size: 14px;
	padding: 10px;
	margin: 4px;
}

@mixin color {
	color: #580909;
	background-color: #e9e5ab;
}

#product-card {
	@include size;
	@include color;
	width: 600px;
}