Funksionet në SASS

Në këtë mësim do të shqyrtojmë se si të përdorim funksionet. Funksionet, janë disi të ngjashme me përzierjet, por në të njëjtën kohë lejojnë shtimin e parametrave, që mund të ndryshojnë vlerat e tyre.

Le të krijojmë një funksion func, i cili do të përcaktojë madhësinë e fontit. Le të jetë madhësia e transmetuar si parametër dhe si parametër le të veprojë një ndryshore:

$font-size: 10px;

Pastaj përcaktojmë parametrin në funksion $n dhe domosdoshmërisht tregojmë në trupin e funksionit @return:

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

Rezultati i kompilimit:

#main {
	font-size: 20px;
}

Gjithashtu në funksion mund të transmetohet një argument i emërtuar. Le të rishkruajmë kushtet e shembullit të mëparshëm:

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

Dhe në skedën styles.css do të shohim të njëjtin kod:

#main {
	font-size: 20px;
}

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit në vijim:

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

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit në vijim:

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

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit në vijim:

$size: 2px;

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

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