Fonctions en SASS

Dans cette leçon, nous examinerons comment utiliser les fonctions. Les fonctions, un peu similaires aux mixins, mais permettent d'ajouter des paramètres, qui peuvent changer leurs valeurs.

Créons une fonction func qui va définir la taille de la police. Laissons la taille être passée en paramètre et que le paramètre soit une variable :

$font-size: 10px;

Ensuite, nous spécifions dans la fonction le paramètre $n et nous indiquons obligatoirement dans le corps de la fonction @return :

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

Résultat de la compilation :

#main {
	font-size: 20px;
}

On peut également passer un argument nommé à la fonction. Réécrivons les conditions de l'exemple précédent :

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

Et dans le fichier styles.css nous verrons le même code :

#main {
	font-size: 20px;
}

Dites quel sera le résultat de la compilation du code suivant :

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

Dites quel sera le résultat de la compilation du code suivant :

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

Dites quel sera le résultat de la compilation du code suivant :

$size: 2px;

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

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