एसएएसएस में फ़ंक्शन

इस पाठ में हम देखेंगे कि फ़ंक्शन का उपयोग कैसे करें। फ़ंक्शन, मिक्सिन की तरह ही होते हैं, लेकिन इसके साथ ही वे पैरामीटर जोड़ने की अनुमति देते हैं, जो अपना मान बदल सकते हैं।

आइए एक फ़ंक्शन func बनाते हैं, जो फ़ॉन्ट आकार सेट करेगा। मान लीजिए कि आकार पैरामीटर के रूप में पारित किया जाता है और पैरामीटर के रूप में एक चर होगा:

$font-size: 10px;

फिर फ़ंक्शन में पैरामीटर लिखें $n और शरीर में अवश्य निर्दिष्ट करें फ़ंक्शन @return:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

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

#main {
	font-size: 20px;
}

आप फ़ंक्शन में नामित पैरामीटर भी पास कर सकते हैं। आइए पिछले उदाहरण की शर्तों को फिर से लिखें उदाहरण:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

और फ़ाइल styles.css में हम वही कोड देखेंगे:

#main {
	font-size: 20px;
}

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

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

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

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

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

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}