Funcții în SASS

În această lecție vom analiza cum să utilizăm funcțiile. Funcțiile sunt oarecum similare cu mixin-urile, dar permite adăugarea de parametri, care își pot schimba valorile.

Să creăm o funcție func care va seta dimensiunea fontului. Fie că dimensiunea este transmisă ca parametru și ca parametru să fie o variabilă:

$font-size: 10px;

Apoi definim în funcție parametrul $n și obligatoriu indicăm în corpul funcției @return:

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

Rezultatul compilării:

#main {
	font-size: 20px;
}

De asemenea, în funcție poate fi transmis un argument numit. Să rescriem condițiile exemplului anterior:

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

Și în fișierul styles.css vom vedea același cod:

#main {
	font-size: 20px;
}

Spuneți care va fi rezultatul compilării următorului cod:

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

Spuneți care va fi rezultatul compilării următorului cod:

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

Spuneți care va fi rezultatul compilării următorului cod:

$size: 2px;

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

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