Ֆունկցիաները SASS-ում

Այս դասում մենք կդիտարկենք, թե ինչպես օգտագործել ֆունկցիաները: Ֆունկցիաները որոշակիորեն նման են խառնուրդներին, բայց միաժամանակ թույլ են տալիս ավելացնել պարամետրեր, որոնք կարող են փոխել իրենց արժեքները:

Եկեք ստեղծենք func ֆունկցիա, որն akan սահմանի տառատեսակի չափը: Թող չափը փոխանցվի պարամետրով, և որպես պարամետր հանդես գա փոփոխականը:

$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);
}