Articles
Introduction à SASS/SCSS
La fonction `if` dans SASS

La fonction `if` dans SASS

Cet article explique la fonction if dans SASS.

Nous passerons en revue, étape par étape, tout ce qui va des bases de la fonction if aux techniques avancées.

YouTube Video

La fonction if dans SASS

La fonction if() est une fonction conditionnelle simple fournie par SASS qui renvoie l'une de deux valeurs selon une condition booléenne. Elle est similaire à l'opérateur ternaire de JavaScript.

Syntaxe

La syntaxe est la suivante :.

1// if(condition, trueValue, falseValue)
  • Si condition est vraie, elle renvoie trueValue ; si elle est fausse, elle renvoie falseValue.

Utilisation de base

Par exemple, vous pouvez utiliser la fonction if() pour changer les couleurs d'arrière-plan et de texte selon que le thème est sombre ou clair.

Exemple de code 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Si la variable $theme vaut "dark", l'arrière-plan devient noir avec un texte blanc ; si elle vaut "light", l'arrière-plan devient blanc avec un texte noir.

Le CSS généré 

1body {
2  background-color: black;
3  color: white;
4}
  • Comme la variable $theme vaut "dark", l'arrière-plan est noir avec un texte blanc.

Différences entre l’instruction @if et la fonction if()

Sass propose une instruction @if et une fonction if() pour les branchements conditionnels, mais elles sont utilisées à des fins différentes.

Exemple de code 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • L’instruction @if détermine quel code est généré à la compilation de Sass.
  • À l’inverse, la fonction if() renvoie une valeur et sert à basculer dynamiquement des valeurs à l’intérieur des expressions.

Le CSS généré 

1body {
2  background-color: black;
3  color: white;
4}
  • Dans cet exemple, puisque $theme vaut "dark", un arrière-plan noir et une couleur de texte blanche sont appliqués.
  • Les deux principales différences sont que l’instruction @if contrôle la structure, tandis que la fonction if() renvoie une valeur.

Utilisation de fonctions if imbriquées

Lorsque vous avez besoin de branchements complexes, vous pouvez imbriquer des fonctions if.

Exemple de code 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Si $theme vaut "dark", elle renvoie le noir ; si "light", elle renvoie le blanc ; sinon, elle renvoie la valeur par défaut ($custom-color).

Le CSS généré 

1body {
2  background-color: blue;
3}
  • Comme la variable $theme est custom, la couleur d'arrière-plan est bleue.

Cas d'utilisation pratiques

Changement de thème

Ci-dessous un exemple qui modifie les styles des boutons en fonction du thème.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Ce code est un exemple conditionnel SASS qui bascule les couleurs d'arrière-plan, de texte et de bordure d'un bouton selon la valeur de la variable $theme. La fonction if() est utilisée pour définir dynamiquement des styles pour les thèmes sombre et clair.

Le CSS généré 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • En changeant le thème, vous pouvez modifier uniformément l'apparence générale.

Exemple avancé : définition dynamique du contraste des couleurs

Voyons un exemple qui définit automatiquement la couleur du texte en fonction de la couleur d'arrière-plan.

Exemple de code 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • La fonction color.channel() est utilisée pour obtenir la luminosité (lightness) de la couleur d’arrière-plan. Si cette valeur est supérieure à 50%, le noir est choisi ; si elle est inférieure, le blanc est choisi comme couleur de texte, ce qui optimise automatiquement le contraste avec l’arrière-plan.

Le CSS généré 

1body {
2  background-color: #000;
3  color: white;
4}
  • En utilisant la fonction if(), vous pouvez mettre en œuvre des styles flexibles qui prennent en compte l’accessibilité du design, par exemple l’ajustement du contraste.

Combinaison avec @function

L'utilisation de la fonction if à l'intérieur d'une @function permet une conception de styles encore plus flexible.

Exemple de code 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Ce code démontre l'utilisation de if() au sein d'une @function pour renvoyer des couleurs appropriées en fonction du thème et du type de couleur. Cela permet une conception de styles cohérente et réutilisable pour chaque thème.

Le CSS généré 

1body {
2  background-color: black;
3  color: white;
4}
  • En créant et en utilisant des fonctions utilitaires qui tirent parti de la fonction if(), vous pouvez améliorer la maintenabilité de l’ensemble du projet.

Notes

  1. La fonction if ne peut pas être utilisée avec des valeurs dynamiques Comme le CSS est lui-même un langage statique, la fonction if détermine les valeurs au moment où SASS est compilé. Pour une logique conditionnelle à l'exécution, vous devez utiliser JavaScript.

  2. Privilégiez la lisibilité Comme les fonctions if imbriquées peuvent devenir complexes et nuire à la lisibilité, vous pouvez utiliser les @mixin et @function de SASS selon les besoins pour organiser votre code.

Conclusion

La fonction if de SASS est un outil puissant qui renvoie des valeurs différentes selon les conditions. Elle est utile non seulement pour des conditions simples, mais aussi dans de nombreux scénarios tels que le changement de thème et les réglages de style dynamiques. Cependant, face à des conditions complexes, prêtez attention à la lisibilité et exploitez @mixin et @function pour améliorer la maintenabilité.

En maîtrisant la fonction if, vous pouvez obtenir une conception de styles plus efficace et plus flexible.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Les structures conditionnelles dans SASSItération dans SASS