Les structures conditionnelles dans SASS

Cet article explique les structures conditionnelles dans SASS.

Nous expliquons clairement tout, des bases aux usages avancés des structures conditionnelles avec les directives @if, @else if et @else, à l’aide d’exemples pratiques.

YouTube Video

Les structures conditionnelles dans SASS

SASS est un langage de feuilles de style qui étend CSS, et vous pouvez contrôler les styles de manière flexible à l’aide de structures conditionnelles. Dans SASS, vous pouvez utiliser @if, @else if et @else pour modifier la sortie des styles au moment de la compilation.

Syntaxe conditionnelle de base

Les conditions de base dans SASS s’écrivent selon la syntaxe suivante.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if évalue la première condition, et si celle-ci est fausse, les blocs @else if puis @else sont évalués dans cet ordre.

Exemple de condition simple

Dans l’exemple suivant, la couleur de fond change en fonction de la variable $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

CSS compilé

1body {
2  background-color: #333;
3  color: #fff;
4}

• Lorsque $theme vaut "dark", un fond sombre et une couleur de texte blanche sont appliqués.

Combiner les conditions avec des calculs

Les conditions gèrent non seulement les comparaisons de chaînes et de couleurs, mais aussi des calculs numériques.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

CSS compilé

1.container {
2  max-width: 1200px;
3}

• Les comparaisons numériques sont également possibles, et lorsque $width dépasse 1000px, max-width: 1200px est généré.

Conditions imbriquées

En imbriquant des conditions, vous pouvez exprimer des conditions complexes.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

CSS compilé

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• L’imbrication des conditions permet d’appliquer des styles en fonction du thème et de la taille.

Utiliser des conditions dans des fonctions personnalisées

L’utilisation de conditions à l’intérieur de fonctions personnalisées peut améliorer la réutilisabilité.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

CSS compilé

1.card {
2  background-color: #333;
3}

• En encapsulant les conditions dans des fonctions, vous augmentez la réutilisabilité et la maintenabilité.

Exemple pratique - Changer de design

Voyons un exemple de changement du design global en fonction de certaines conditions.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

CSS compilé

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Vous pouvez basculer dynamiquement la palette de couleurs de toute la page selon la variable de thème.

Remarques et bonnes pratiques

Lorsque vous utilisez des conditionnels SASS, vous pouvez prendre en compte les points suivants.

1. Gardez les conditions simples

   Une imbrication complexe nuit à la lisibilité ; exploiter des fonctions et des mixins aide à rester simple.

2. Abstraire avec des variables et des fonctions

   Si vous utilisez des conditions similaires à plusieurs endroits, les regrouper dans des variables ou des fonctions améliore la maintenabilité.

3. Évitez une logique trop lourde

   Unifiez autant que possible les règles de design et évitez d’abuser des conditions.

Conclusion

Les conditions dans SASS sont un outil très efficace pour créer des styles flexibles et dynamiques. Ici, nous avons tout expliqué pas à pas, des bases aux exemples pratiques. Lors de l’utilisation de conditions dans des projets réels, concevez en gardant la réutilisabilité du code à l’esprit tout en veillant à ne pas trop complexifier les choses.

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