Funzioni in SASS

In questa lezione esamineremo come utilizzare le funzioni. Le funzioni sono in qualche modo simili ai mixin, ma consentono di aggiungere parametri, che possono cambiare i loro valori.

Creiamo una funzione func che imposti la dimensione del font. Lasciamo che la dimensione venga passata come parametro e che il parametro sia una variabile:

$font-size: 10px;

Quindi specifichiamo nella funzione il parametro $n e obbligatoriamente indichiamo nel corpo della funzione @return:

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

Risultato della compilazione:

#main {
	font-size: 20px;
}

È anche possibile passare un argomento nominato alla funzione. Riscriviamo le condizioni dell'esempio precedente:

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

E nel file styles.css vedremo lo stesso codice:

#main {
	font-size: 20px;
}

Spiegate quale sarà il risultato della compilazione del seguente codice:

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

Spiegate quale sarà il risultato della compilazione del seguente codice:

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

Spiegate quale sarà il risultato della compilazione del seguente codice:

$size: 2px;

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

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