• 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

Optimisez les mixins grâce aux conditions dans Sass

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

Notre code n’est pas très dynamique, par là j’entends qu’il n’est pas modulable, qu’il ne s’adapte pas en fonction des situations. Comment faire si on veut que la couleur s’adapte si l’ombre est plus ou moins foncée, par exemple ? 🤔

Découvrez les conditions

Notre mixin heading-shadow fonctionne très bien en l’état, sauf si bien sûr on emploie une couleur très très foncée. L’œil humain distingue mal les couleurs sombres, c’est pour cela qu'une différence de luminosité de 10 % entre deux couleurs claires sera beaucoup plus visible que la même différence entre deux couleurs sombres.

Au-delà d’un certain seuil, quand la couleur de l’ombre est rendue plus foncée, il serait logique de la rendre plus claire à la place, ou sinon nous ne pourrions plus distinguer le texte de l’ombre. Fixons ce seuil à 25 % : toute couleur ayant une luminosité de moins de 25 % sera éclaircie. Sinon, si elle garde un pourcentage de luminosité de plus de 25 %, dans ce cas elle sera foncée.

En programmation, on appelle cela une structure conditionnelle, ou plus simplement condition (“if/else” en anglais) : si la couleur a moins de 25 % de luminosité, l’éclaircir ; sinon, l’assombrir :

Illustration de la boucle conditionnelle
Une boucle conditionnelle

OK, jusqu’ici c’est compris, mais comment faire ça techniquement ? 🤔

Commencez par taper @if... Poursuivez en mettant entre accolades le contenu de votre condition : le pourcentage de luminosité est inférieur à 25 %. Pour obtenir la luminosité de $colour, on utilise la fonction  lightness() de Sass, qui retourne la valeur de luminosité d’une couleur :

@if ( lightness($colour) < 25% ) {...}

La condition est prise en compte comme une question vrai/faux. Si la réponse est vraie, faire ceci ; si elle est fausse, faire autre chose.

Répondre à la question c’est bien, mais il nous faut plus. Si votre condition est vraie, vous voulez que la couleur soit éclaircie ; et pour spécifier cela vous devez indiquer entre les accolades ce que vous voulez qu’il se passe. Dans notre cas, nous utilisons la fonction  lighten()  de Sass, qui éclaircira la couleur et modifiera donc $colour avec cette nouvelle valeur :

@if ( lightness($colour) < 25% ) {
  $colour: lighten($colour, 10%);
}

Si la condition est vraie, Sass lira ce qu’il y a entre les accolades et exécutera le code. Mais si la réponse est fausse (le pourcentage de luminosité de la couleur en question est égal ou supérieur à 25 %), Sass ignorera le contenu de la première paire d’accolades et ira directement à la prochaine portion de code, qui est celle où nous indiquons l’instruction “alors”. Tapez @else pour la créer, suivi des accolades contenant ce qu’il faut faire si la réponse est fausse :

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

Du coup, si la condition est vraie et que la luminosité de $colour est inférieure à 25 %, on veut utiliser la fonction  lighten()  pour l’éclaircir de 10 %. Mais si l’instruction est fausse, alors on veut utiliser la fonction  darken()  pour l’assombrir de 10 %.

Intégrons à présent notre nouvelle condition si/alors dans notre mixin heading-shadow  :

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

Et maintenant, mettons $colour-secondary, dont la valeur de #001534 a une luminosité de 10 %. Puisque 10 % est inférieur à 25 %, Sass devrait interpréter la condition comme étant vraie et retourner #002a67, la couleur qui est 10 % plus claire :

.form {
  &__heading {
      @include heading-shadow($colour-secondary);
  }
}
.form__heading {
text-shadow: 0.55rem 0.55rem #002a67;
}

Woooohooooo, victoire ! 🙌

Testons un peu plus notre nouvelle fonction avec une couleur beaucoup plus claire pour voir ce qui se passe, prenons blanc par exemple entre nous, difficile de faire plus clair 🙄 :

.form {
&__heading {
  @include heading-shadow($colour-white);
}
}
.form__heading {
text-shadow: 0.55rem 0.55rem #e6e6e6;
}

#E6E6E6 a une luminosité de 90 %, notre mixin l’a donc assombrie de 10 %, exactement comme nous le voulions. Parfait. 👌

Les conditions vous aident à rendre votre codebase flexible et maintenable en adaptant automatiquement les blocs de code avec les données que vous avez renseignées. Flexible et maintenable : deux qualités au poil !

Essayez par vous-même !

Dans cet exercice, ajustez la couleur d’un bouton en utilisant les conditions.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=ab11b867-122f-4b27-8056-48ff67dafcca

Dans quelle condition se trouve ma condition ?

Penchons-nous d’un peu plus près sur notre condition :

( lightness($colour) < 25% )

À gauche, la valeur que vous voulez comparer, en l’occurrence la luminosité de $colour. À droite, la valeur à laquelle vous voulez la comparer, qui est 25 %. Le symbole “inférieur à” (<;);) au milieu est ce qu’on appelle  un opérateur de comparaison.

Un opérateur de comparaison est la façon dont vous comparez les valeurs : est-ce que x est inférieur à y ? Supérieur ? Égal ? Il existe six opérateurs de comparaison au total :

Opérateur

Condition

Résultat

==

x==y

Vrai si x est égal à y

!=

x!==y

Vrai si x n’est pas égal à y

>

x>y

Vrai si x est supérieur à y

<

x<y

Vrai si x est inférieur à y

>=

x>=y

Vrai si x est supérieur ou égal à y

<=

x<=y

Vrai si x est inférieur ou égal à y

Et vous n’êtes pas limité à une seule condition.  Par exemple, si vous voulez que votre condition soit vraie si $colour est inférieure à 25 %, mais aussi supérieure à 10 % ?

Eh bien, c’est possible ! Vous pouvez enchaîner deux conditions en utilisant  and pour les lier :

@if ( lightness($colour) < 25% ) and ( lightness($colour) > 10% ) {...}

En utilisant cet opérateur logique “et”, vous exigez que les deux conditions soient vraies pour que le bloc “si” soit exécuté.

Vous pouvez aussi utiliser l’opérateur logique or, auquel cas le résultat sera vrai si n’importe laquelle des conditions est vraie :

@if ( lightness($colour) < 25% ) or ( saturation($colour) > 10% ) {...}

En utilisant or, tout ce qui se trouve dans les accolades sera exécuté si la couleur a moins de 25 % de luminosité ou plus de 10 % de saturation.

Vous pouvez aussi utiliser les conditions toutes seules. L’instruction “else” n’est pas obligatoire. Il arrive que vous ayez besoin que du code soit exécuté si une condition est remplie, mais que si elle est fausse, vous n’ayez pas besoin de faire quoi que ce soit ; dans ce cas, ne mettez pas d’instruction @else.

Souvenez-vous, quand une condition est jugée fausse, le contenu des accolades est tout simplement ignoré et c’est le bout de code suivant qui sera pris en compte. Il peut s’agir d’un bloc @else, mais ça peut être tout simplement la suite de votre code :

@if ( saturation($colour) < 50% ) {
  $colour: saturation($colour, 50%);
}
background-color: $colour;

Regardons ensemble. Ici la condition vérifie si la saturation de $colour  est strictement inférieure à 50 %. Si le résultat est vrai, alors la saturation de la couleur sera fixée à 50 % grâce à la fonction saturation() de Sass, puis on attribuera $colour comme couleur de fond.

Pour simplifier :  il y a un minimum à atteindre concernant la saturation de la couleur de fond. Si elle est inférieure à 50 %, il faut la porter à 50 %, mais si elle est déjà d’au moins 50 % voire plus, on peut directement passer à la suite du code qui établit $colour en tant que couleur de fond.

Une seconde. Je ne suis toujours pas sûr de saisir la différence. On peut essayer avec un autre exemple ? ✋

Prenons un autre exemple. Avec des conditions if/else, c’est comme si vous partiez du principe que si vous êtes un sorcier, alors vous irez à Poudlard, et si vous êtes un moldu, vous n’irez pas. Selon que vous êtes un moldu ou un sorcier, vous irez ou non à Poudlard ; sauf que dans cette logique, si vous êtes un moldu vous vous retrouvez sans école, ce qui est un peu triste pour nous autres pauvres moldus.

Avec les instructions “si” toutes seules, vous pouvez préciser que si l’étudiant est sorcier (et qu’il a reçu sa lettre lettre 🤭) alors il ira à Poudlard ; les autres iront forcément dans l’école la plus proche. 

 Essayez par vous-même !

Reprenez le code de l’exercice précédent et allez plus loin avec les conditions et les arguments.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=1a3ef7aa-c1eb-4749-8ab9-9e8addd23a34

Vous avez maintenant du code qui fonctionne. Youhou ! Plutôt que de regarder une couleur vous-même et de décider si elle doit être plus claire ou plus foncée, vous avez délégué cette décision en indiquant dans votre code les conditions nécessaires afin de le laisser travailler à votre place (et vous la couler douce au soleil) ☀️. Les instructions “si/alors” sont des instructions étape par étape pour résoudre un problème : si c’est comme ceci, faire cela, puis cela ; ou alors si c’est comme ci, faire ça.

Le terme technique pour ces petites suites d’instructions est algorithme. Eh oui, vous venez d’écrire votre premier algorithme, félicitations ! 💪

On pense souvent (et à tort) que les algorithmes sont des morceaux de code extrêmement complexes et obscurs (coucou Matrix), et c’est vrai qu’ils peuvent l’être. L’algorithme du newsfeed de Facebook est suffisamment compliqué pour être breveté ! Mais sur un niveau plus basique, un algorithme n’est rien d’autre qu’une condition qui indique au programme comment procéder.

Apprendre à utiliser les conditions pour contrôler le déroulé d’un programme, ou comment exécuter les instructions et dans quel ordre, est une étape super importante pour apprendre à créer un code flexible et maintenable.

En résumé

  • Les instructions @if /@else  disent au code comment se comporter en fonction de conditions qui sont vraies ou fausses.

  • Elles comparent deux valeurs avec une condition et exécutent un ensemble d’instructions si elle est vraie, et un autre si elle est fausse.

  • Elles rendent le code plus flexible en lui permettant de s’adapter aux changements.

  • Les instructions @if  peuvent être utilisées seules, sans @else. 

Dans le chapitre suivant, nous allons réorganiser notre condition en l’enveloppant dans sa propre petite fonction.

Example of certificate of achievement
Example of certificate of achievement