Funkciók az SASS-ban

Ebben a leckében megvizsgáljuk, hogyan használhatunk funkciókat. A funkciók valamelyest hasonlítanak a mixinekre, de eközben lehetővé teszik paraméterek hozzáadását, amelyek értékeit meg lehet változtatni.

Készítsünk egy func funkciót, amely beállítja a betűméretet. Legyen a méret paraméterként átadva, és a paraméter legyen egy változó:

$font-size: 10px;

Ezután a funkcióban definiáljuk a $n paramétert és feltétlenül jelezzük a funkció törzsében a @return-nal:

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

A fordítás eredménye:

#main {
	font-size: 20px;
}

A funkciónak névvel ellátott argumentumot is át lehet adni. Írjuk át az előző példa feltételeit:

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

És a styles.css fájlban ugyanazt a kódot fogjuk látni:

#main {
	font-size: 20px;
}

Mondja el, mi lesz a következő kód fordításának eredménye:

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

Mondja el, mi lesz a következő kód fordításának eredménye:

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

Mondja el, mi lesz a következő kód fordításának eredménye:

$size: 2px;

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

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