Functies in SASS

In deze les bekijken we hoe we functies kunnen gebruiken. Functies lijken enigszins op mixins, maar stellen je in staat om parameters toe te voegen, die hun waarden kunnen veranderen.

Laten we een functie func maken, die de lettergrootte zal instellen. Laat de grootte worden doorgegeven als parameter en laat de parameter een variabele zijn:

$font-size: 10px;

Vervolgens schrijven we parameter $n in de functie en we moeten in de body van de functie @return specificeren:

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

Compilatieresultaat:

#main {
	font-size: 20px;
}

Je kunt ook een benoemd argument doorgeven aan de functie. Laten we de voorwaarden van het vorige voorbeeld herschrijven:

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

En in het bestand styles.css zien we dezelfde code:

#main {
	font-size: 20px;
}

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

$size: 2px;

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

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