Les fonctions Sass

Qu’est-ce qu’une fonction ?

Une fonction est un bloc de code contenant une suite d’instructions cohérentes et dont le rôle est d’effectuer une tâche précise.

L’idée de base d’une fonction est d’effectuer des calculs ou opérations dans son corps et de renvoyer une valeur en résultat. Généralement, les calculs vont être faits en fonction de certaines données qu’on va devoir passer à la fonction pour qu’elle fonctionne. On appelle ces données des arguments.

Il existe deux grands moyens d’utiliser les fonctions avec Sass : on peut soit utiliser des fonctions Sass prédéfinies ou “prêtes à l’emploi”, soit créer nos propres fonctions.

 

A quoi servent les fonctions Sass ?

En programmation, les fonctions servent généralement deux objectifs :

  • Gagner du temps de développement / simplifier nos scripts ;
  • Masquer la complexité de certaines opérations.

Pour bien comprendre cela, il faut expliquer plus précisément ce que sont les fonctions.

Une fonction est un suite d’instruction cohérentes auxquelles on donne un nom. Il nous suffit ensuite d’utiliser ce nom pour exécuter tûtes les instructions contenues dans le corps de la fonction.

Imaginons qu’on doive faire certains calculs pour déterminer une couleur ou une marge, et qu’on doive refaire ces calculs plusieurs fois dans nos fichiers CSS. Il peut être ingénieux d’utiliser une fonction dans ce cas là.

En effet, nous n’aurons qu’à définir une seule et unique fois notre fonction avec notre suite de calcul dans la fonction puis nous allons pouvoir réutiliser cette fonction en l’appelant simplement dans notre fichier. Cela permet donc de créer du code plus clair, plus simple, et plus facilement maintenable à la manière des variables étudiées précédemment.

Les fonctions peuvent également permettre de masquer la complexité de certaines opérations, notamment dans le cas des fonctions prédéfinies. En effet, la Scss nous fournit des fonctions prêtes à l’emploi et certaines d’entres elles auraient été difficiles à coder nous même car elles contiennent beaucoup de calculs différents. Heureusement, nous n’avons qu’à appeler ces fonctions pour effectuer les opérations qu’elles contiennent !

 

utilisation des fonctions Sass prédéfinies

Une fonction prédéfini est une fonction dont le corps (le code) a déjà été défini et est intégré au langage.

Pour utiliser une fonction prédéfinie, il suffit de l’appeler en utilisant son nom en lui passant éventuellement des données dont elle a besoin pour fonctionner et qu’on appelle arguments. La syntaxe générale pour appeler une fonction va être la suivante : nom_de_fonction(argument1, argument2).

Pour appeler une fonction, on écrit donc son nom suivi d’un couple de parenthèses (obligatoires) dans lesquelles on peut éventuellement placer des données (arguments) qui seront transmis à la fonction pour qu’elle effectue des calculs.

Prenons immédiatement quelques exemples en présentant quelque fonctions Sass utiles. Vous pouvez obtenir la liste complète des fonctions Sass sur la documentation officielle ici.

La fonction Sass random()

La fonction Sass random() retourne un nombre aléatoire. Si on utilise cette fonction sans lui passer d’argument, la fonction retournera un nombre décimal aléatoire compris entre 0 et 1. Si on lui passe un argument plus grand que 1, la fonction random() retournera un nombre entier aléatoire compris entre 1 et le nombre passé.

Exemple d'utilisation de la fonction random() de Sass - html

Exemple d'utilisation de la fonction random() de Sass - scss

Exemple d'utilisation de la fonction random() de Sass - css

Exemple d'utilisation de la fonction random() de Sass - resultat

Ici, on utilise random() trois fois au sein de la fonction CSS rgb() en lui passant une limite en argument de 255. A chaque fois qu’on utilise random(255), la fonction va renvoyer un nombre entier aléatoire compris entre 1 et 255.

La fonction rgb() va ainsi recevoir trois nombres aléatoires compris entre 1 et 255 et pouvoir à son tour calculer une couleur à partir de ces trois nombres.

La fonction round()

La fonction round() permet d’arrondir un nombre décimal à l’entier le plus proche. Cette fonction peut être très utile pour arrondir un nombre après un calcul dans le cas de calculs de marges par exemple.

Exemple d'utilisation de la fonction round() de Sass - scss

Exemple d'utilisation de la fonction round() de Sass - css

Exemple d'utilisation de la fonction round() de Sass - resultat

On utilise ici plusieurs notions d’un coup. Dans cet exemple, il faut commencer par imaginer qu’on obtient le nombre “1440” (contenu dans la variable $largeur suite à certains calculs et que ce nombre n’est pas connu à l’avance mais est variable.

On utilise ensuite ce nombre pour calculer des marges gauche et droite. Ici, comme on veut obtenir une valeur entière pour les marges, on utilise round($largeur/100. La fonction renvoie l’entier le plus proche de 1440/100 (14).

Ensuite, pour que la valeur soit bien reconnue par margin, il faut lui passer une unité. On utilise ici le signe + comme opérateur de concaténation. Concaténer signifie “mettre bout à bout”.

Lorsqu’on utilise + avec des valeurs de type chaine de caractères (des mots), il permet de mettre bout à bout ces valeurs pour créer une nouvelle chaine. Ici, on obtient donc 14px.

La fonction adjust-color()

La fonction adjust-color() permet d’ajuster une couleur de base en modifiant certains de ses composants. Cette fonction va pouvoir être utile pour créer des variations d’une couleur principale par exemple.

Cette fonction peut prendre jusqu’à 5 arguments :

  • soit une couleur puis trois nombres pour ajuster les canaux RGB de la couleur et enfin un niveau d’opacité ;
  • soit une couleur puis trois nombres pour ajuster les canaux HSL de la couleur et enfin un niveau d’opacité.

Notez que seul le premier argument relatif à la couleur de base est obligatoire au fonctionnement de la fonction. Les autres sont facultatifs.

On va pouvoir utiliser cette fonction comme ceci (valeurs RGB) : adjust-color(couleur, $red: nombre, $green: nombre, $blue: nombre, $alpha: nombre) ou comme cela (valeurs HSL) : adjust-color(couleur, $hue: nombre, $saturation: nombre, $lightness: nombre, $alpha: nombre)

Les valeurs passées vont être ajoutées à la propriété correspondante de la couleur de base pour renvoyer finalement une couleur ajustée. On va pouvoir passer des valeurs négatives pour diminuer une propriété de la couleur de base.

Exemple d'utilisation de la fonction adjust-color() de Sass - html

Exemple d'utilisation de la fonction adjust-color() de Sass - scss

Exemple d'utilisation de la fonction adjust-color() de Sass - css

Exemple d'utilisation de la fonction adjust-color() de Sass - resultat

Les fonctions darken() et lighten()

Le fonctions darken() et lighten() permettent respectivement de rendre une couleur plus foncée ou plus claire d’un certain montant exprimé en pourcentage.

On va passer deux arguments à ces fonctions : une couleur de base à modifier et un montant compris entre 0% et 100% représentant de combien on souhaite foncer ou éclaircir la couleur de départ.

Exemple d'utilisation des fonctions darken() et lighten() de Sass - scss

Exemple d'utilisation des fonctions darken() et lighten() de Sass - css

Exemple d'utilisation des fonctions darken() et lighten() de Sass - resultat

 

Création de fonctions Sass

Nous allons également pouvoir créer nos propres fonctions Sass. Pour cela, nous allons devoir utiliser la règle @function suivi de la définition de notre fonction, c’est-à-dire de son nom, de la liste des arguments dont elle a besoin pour fonctionner et des instructions qu’elle doit exécuter.

Prenons un exemple simple pour comprendre comment créer une fonction en pratique. Ici, nous allons créer une fonction très simple dont le rôle est de multiplier un nombre par deux. En pratique, cette fonction n’est pas très utile mais cela me permet de vous présenter la syntaxe de création d’une fonction Sass.

Exemple création fonction Sass - scss

Exemple création fonction Sass - css

Exemple création fonction Sass - resultat

Ici, on crée une fonction qu’on appelle fois2(). Notez qu’on peut appeler nos fonctions comme on le souhaite du moment que le nom commence par une lettre, n’utilise pas de caractères spéciaux ni accentués et ne contient pas d’espace.

Le rôle de cette fonction est de multiplier un nombre par 2. Elle va donc avoir besoin d’un argument (le nombre qu’on souhaite multiplier par deux). Lors de la définition d’une fonction, on va utiliser un prête nom qui va représenter le nombre qu’on va ensuite passer en argument. On appelle ce prête nom un paramètre.

On peut choisir le nom qu’on souhaite pour les paramètres de notre fonction. Ici, j’ai choisi le nom $nb. Le corps de notre fonction est courte : on commence par multiplier par deux le nombre qui sera passé en argument et on place le résultat dans une variable $resultat. On retourne ensuite le contenu de la variable avec une règle @return.

La règle @return est indispensable : elle permet à notre fonction de retourner de manière effective son résultat. Attention ici : une fonction ne peut retourner qu’un résultat à la fois. Si vous tentez d’écrire du code après @return, celui-ci sera donc ignoré.

Notre fonction est désormais définie et prête à l’emploi. Pour l’utiliser, il nous suffit alors de l’appeler en lui passant un nombre en argument.