Funkcije u SASS-u

U ovoj lekciji ćemo razmotriti kako da koristimo funkcije. Funkcije su donekle slične mešanjima (mixin), ali omogućavaju dodavanje parametara koji mogu da menjaju svoje vrednosti.

Hajde da napravimo funkciju func koja će podesiti veličinu fonta. Neka se veličina prosledi kao parametar i neka parametar bude promenljiva:

$font-size: 10px;

Zatim u funkciji definišemo parametar $n i obavezno navedemo u telu funkcije @return:

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

Rezultat kompilacije:

#main {
	font-size: 20px;
}

Takođe, funkciji se može proslediti imenovani argument. Prepisaćemo uslove iz prethodnog primer:

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

I u fajlu styles.css videćemo isti taj kod:

#main {
	font-size: 20px;
}

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

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

Objasnite, kakav će biti rezultat kompilacije sledećeg koda:

$size: 2px;

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

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