SASS - Les fonctions

Une fonction est un bloc contenant du code afin d'effectuer un rôle précis que nous appellerons dès que nous en aurons besoin. Cela évite la réécriture de code similaire.

Sass possède ses propres fonctions, mais nous donne aussi la possibilité de créer les nôtres.

Je ne vais pas énumérer toutes les fonctions de Sass et je vous laisse les découvrir directement sur le site officiel : https://sass-lang.com/documentation/modules

Fonctions perso

Pour créer nos fonctions, nous utiliserons le mot clé @function suivi d'un nom :

@function doublePadding($value) {
    // ...
}

Le nom reste libre, mais pour respecter les conventions de nommage, préférez le camelCase.

La variable entre les parenthèses permet de récupérer une valeur que nous lui transmettrons au moment de son appel. Nous aurons alors la possibilité d'effectuer, par exemple, un calcul et de retourner un résultat en contrepartie.

@function doublePadding($value) {
    $result: $value * 2;
    @return $result;
}

Ma fonction doublePadding effectue un calcul sur une valeur reçue, elle la multiplie par deux et en retourne son résultat. Le mot clé @return est très important, car sans celui-ci, nous ne pouvons renvoyer de valeur et notre fonction n'aurait que peu d'utilité.

Son utilisation reste basique :

$color-text: #000000;

@function doublePadding($value) {
    $result: $value * 2;
    @return $result;
}

.body {
    color: $color-text;
    margin: 0;
    padding: 10px 12px doublePadding(10)+px 10px;
}

J'utilise la fonction dans mon padding en lui passant la valeur de 10. La fonction me retournera la valeur de 20 auquel j'ajoute le texte px grâce au signe plus +.

Le signe plus + permet généralement d'additionner des nombres, mais quand l'addition ne peut se faire, comme entre un nombre et un texte, il associe l'ensemble pour former une phrase.

Vous pouvez créer autant de fonctions que nécessaire et les stocker dans un fichier à part pour plus de lisibilité.