• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/24/20

Créez et utilisez des fonctions

Log in or subscribe for free to enjoy all this course has to offer!

Grâce aux conditions, notre code est devenu plus modulable et il peut s’adapter en fonction des situations. Mais on peut aller encore plus loin, avec les fonctions !

Utilisez des fonctions

À l’heure actuelle, la mixin heading-shadow possède une logique qui gère la façon dont une couleur est modifiée en fonction de ses valeurs.

Tout fonctionne comme prévu... sauf qu’en fait, non.

Mais... mais quoi encore ?! 🙄

Notre mixin ajuste toujours $colour, qu’il s’agisse de la couleur par défaut ou d’une couleur tapée manuellement. Sauf que, si vous tapez une couleur, c’est probablement qu’il s’agit d’une couleur que vous avez déjà choisie, n’est-ce pas ? Ce que vous voulez vraiment ici, c’est ajuster automatiquement la valeur de la couleur par défaut de votre mixin, en fonction de $colour-primary. 

On veut ajuster la couleur de la valeur par défaut
On veut ajuster la couleur de la valeur par défaut

Pour maîtriser la luminosité/obscurité de la couleur par défaut sans avoir à la renseigner manuellement, vous devez modifier sa valeur au sein de la déclaration de variable dans l’argument. Pour ce faire, vous devez déplacer le bloc de code if/else au sein même de l’argument pour $colour :

@mixin heading-shadow($colour: @if ( lightness($colour) < 25% ) {
      $colour: lighten($colour, 10%);
  }@else{
      $colour: darken($colour, 10%);
  }, $size: $heading-shadow-size){
  text-shadow: $size $size $colour;
}

On veut bien, mais c’est un peu le bazar là, non ?

Exactement ! C’est tout ce qu’il ne faut pas faire : ce n’est pas du tout clair quand on regarde le code. Où est-ce que les arguments de la mixin s’arrêtent ? Où commence le code ? 🤯 Toutes ces accolades rendent l’ensemble trop confus. Et de toute façon, vous ne pouvez pas faire ça même si vous en avez envie : Sass vous renverra une erreur pour syntaxe invalide 🤭

Au lieu d’essayer de mettre un gros tas de code  dans vos arguments, vous devez plutôt emballer le tout et le ranger dans son propre conteneur, ensuite vous allez pouvoir brancher facilement votre code à l’argument. C’est ce qu’on appelle une fonction. Vous aviez commencé à les utiliser quelques chapitres plus haut pour manipuler les couleurs, mais nous ne nous étions pas plongés dedans en détail.

Préparez vos chaudrons chers sorciers, il est temps de créer nos propres fonctions !

Créez des fonctions

Une fonction est un bout de code qui effectue une tâche lorsqu’elle est exécutée, comme par exemple assombrir une couleur, indiquer sa clarté ou convertir ses valeurs RBG en hexadécimal : rgb(21, 222,165). Eh oui, à chaque fois que vous écrivez vos couleurs sous forme de rgb() dans .scss, vous faites appel à une fonction. Vous les utilisez depuis le début sans le savoir ! Cool, non ? 💫

Allez, c’est parti : prenons la condition de votre mixin et transformons-la en fonction !

@function lightness-shift() {
}

On commence par définir une fonction en utilisant le mot clé @function suivi de son nom. Ensuite on y ajoute une paire de parenthèses dans lesquelles on ajoutera les arguments et une paire d’accolades pour accueillir votre code. C’est un peu comme si vous étiez en cours de potion : vous prenez une fiole (une fonction), vous y ajoutez une étiquette (un nom), puis vous ouvrez le bouchon (accolades) pour y placer une potion (votre code) et vous refermez le bouchon (accolades).

La manière pour définir une fonction et une mixin sont très similaires, sauf qu’au lieu d’utiliser le mot clé @mixin , on utilise @function.

Et, comme pour les mixins, on peut inclure des arguments. Pour  lightness-shift(), il vous faut un argument avec lequel la fonction va pouvoir travailler ; ici vous voulez inclure en argument la couleur que vous voulez modifier :

@function lightness-shift($colour){
}

Et voilà, il nous manque juste le code ! Copiez la condition, et collez-la entre les accolades :

@function lightness-shift($colour){
  @if ( lightness($colour) < 25% ) {
      $colour: lighten($colour, 10%);
  }@else{
      $colour: darken($colour, 10%);
  }
}

Votre première fonction est écrite à 99 %. Il vous manque une seule petite chose : retourner une valeur. Vous avez besoin que votre fonction produise une nouvelle valeur de couleur que vous pourrez utiliser en tant que couleur par défaut pour l’ombre. Pour le moment, la fonction modifie seulement $colour avec une valeur plus claire ou plus foncée. Mais en code, vous voulez que la fonction retourne, ou vous rende, une nouvelle valeur de couleur. 

Pour que  lightness-shift()  retourne une valeur, vous devez indiquer à la fonction ce que vous voulez qu’elle retourne quand elle est exécutée. Plutôt que de modifier $colour, faites en sorte que la fonction retourne la nouvelle valeur de couleur directement. Pour faire cela, vous pouvez utiliser @return :

@function lightness-shift($colour){
  @if ( lightness($colour) < 25% ) {
      @return lighten($colour, 10%);
  }@else{
      @return darken($colour, 10%);
  }
}

Lorsque vous ajoutez @return, vous indiquez à Sass la valeur retournée que vous voulez lorsque vous appelez la fonction. Donc, si la luminosité est inférieure à 25 %, vous voulez retourner une couleur qui soit 10 % plus claire, sinon vous voulez retourner une couleur qui soit 10 % plus foncée.

Votre fonction est maintenant prête ! Intégrons-la dans votre mixin, comme lorsque vous faites appel à l’une des fonctions intégrées de Sass :

@mixin heading-shadow($colour: lightness-shift($colour-primary), $size: $heading-shadow-size){
  color: $colour;
  text-shadow: $size $size $colour;
}

En intégrant la condition dans une fonction, nous avons rendu notre code beaucoup beaucoup plus propre et facile à lire. Et plus facile à maintenir en bonus. Nous avons réuni toute notre logique dans un seul bloc, ce qui facilite beaucoup la lecture, la compréhension et la modification du code à l’avenir.

Essayez par vous-même !

Dans cet exercice, entraînez vous aux fonctions en créant une fonction qui change une couleur en une couleur pastel, avec le code fourni dans l’exercice.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=2b806a21-ac0a-4102-b230-bd3d64e727e2

Félicitations ! 👏  Écrire votre propre fonction est une sacrée étape et un aspect important de la programmation. Même si la syntaxe peut varier d’un langage à l’autre, la logique pour définir une fonction est identique à ce que vous venez d’apprendre. Vous pouvez appliquer les techniques apprises dans les précédents chapitres à tous les langages : Ruby, JavaScript, Python, etc.

Vous pensiez juste apprendre à construire des pages web, mais en réalité, vous êtes en train de devenir un programmeur accompli spécialisé dans le développement front-end.

Plutôt cool, hein ? 😉

En résumé

  • Les fonctions sont des bouts de code qui effectuent une tâche lorsqu’elles sont exécutées.

  • Elles permettent d’encapsuler un bloc logique dans un module réutilisable, afin d’obtenir une codebase plus propre et plus maintenable.

  • On définit une fonction en utilisant le mot clé @function.

  • Si vous voulez qu’une fonction retourne une valeur, vous devez le spécifier en utilisant le mot clé @return.

Example of certificate of achievement
Example of certificate of achievement