Opérateurs dans SASS

Articles

Cet article explique les opérateurs dans SASS.

Nous allons expliquer les opérateurs dans SASS avec des exemples pratiques.

YouTube Video

Opérateurs dans SASS

Les opérateurs SASS incluent les opérations numériques, les opérations de comparaison, les opérations logiques et les manipulations de chaînes.

Opérations arithmétiques (addition, soustraction, multiplication, division, modulo)

SASS prend en charge l'arithmétique standard, mais la division / peut prêter à confusion avec le / de CSS, il est donc recommandé d'utiliser math.div(). Les nombres peuvent avoir des unités, et les opérations ne sont possibles qu'entre des unités compatibles.

Vous trouverez ci-dessous des exemples d'arithmétique simple et de l'utilisation du module math.

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

Ce code est un exemple d'addition et de multiplication avec l'unité px, et de division en utilisant math.div().
Des unités incompatibles comme 10px + 2em provoqueront une erreur ou un résultat inattendu. Unifiez les unités ou utilisez les fonctions unit() et unitless().

Gestion et conversion automatique des unités

SASS gère les nombres avec unités, et les règles d’unités pour les résultats de calcul suivent les règles physiques générales. Par exemple, px/px devient sans unité. Soyez attentif à la gestion des unités lors de l’utilisation de la fonction unit() ou après un math.div().

Voici des exemples montrant comment gérer le mélange de valeurs avec ou sans unité.

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

Multiplier des valeurs avec et sans unités fonctionne comme prévu, mais faites attention à l’unité résultante (ou à son absence) lors d’une division.

Opérateurs de comparaison (==, !=, <, >, <=, >=)

SASS dispose d’opérateurs de comparaison, utilisables pour des branchements dans des conditionnelles (@if) et dans des mixins. La comparaison de types complexes comme les couleurs et les listes obéit à leurs propres règles. Notez que la comparaison des couleurs varie selon l’espace colorimétrique.

Voici un exemple qui compare deux nombres et adapte le style.

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

Les opérateurs de comparaison peuvent être combinés avec @if pour des règles de style réactives et conditionnelles.

Opérations logiques (and, or, not)

SASS prend en charge and, or et not. Utilisez and/or pour combiner plusieurs conditions. La priorité et l’ordre d’évaluation peuvent être précisés en utilisant des parenthèses.

Voici un exemple de gestion de conditions complexes avec des opérateurs logiques.

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

La priorité de and et or peut être clarifiée avec des parenthèses. Pour des conditions complexes, l’utilisation de parenthèses permet de garantir lisibilité et sécurité.

Opérations sur les chaînes — concaténation et interpolation

Dans SASS, la concaténation de chaînes peut se faire avec l’opérateur + ou l’interpolation #{}. Le résultat de l’opérateur + dépend du fait que la chaîne de gauche soit entre guillemets ou non, donc l’utilisation de l’interpolation prévisible #{} est plus sûre.

Voici des exemples de concaténation et d’interpolation.

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

L’utilisation de l’interpolation #{} permet d’éviter les problèmes de guillemets et d’insertion d’espaces indésirables.

Arithmétique sur les couleurs (dépréciée)

Dans le passé, SASS supportait l'‘arithmétique des couleurs’, ce qui permettait d'ajouter ou de soustraire des nombres aux couleurs. Cependant, cette fonctionnalité est maintenant obsolète et il faut utiliser les fonctions du module sass:color pour manipuler les couleurs.

Voici des exemples montrant que l’arithmétique directe sur les couleurs est dépréciée, ainsi que les alternatives recommandées.

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

Si vous souhaitez manipuler des couleurs, utilisez les fonctions du module sass:color.

Parenthèses et priorité des opérateurs

Utilisez des parenthèses pour contrôler l’ordre d’évaluation dans les opérations. Les parenthèses sont toujours évaluées avant les opérations à l’extérieur de celles-ci. Utilisez des parenthèses dans les expressions complexes pour garder une bonne lisibilité.

Voici des exemples permettant d’éclaircir l’ordre d’évaluation avec des parenthèses.

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

Comme en mathématiques, les règles de priorité s’appliquent, utilisez donc des parenthèses pour garantir que les calculs se font dans l’ordre souhaité.

Résumé

Lorsque vous utilisez des opérateurs dans SASS, il est important d’écrire du code en gardant à l’esprit la compatibilité future et la lisibilité. Dans les expressions complexes, clarifiez l’ordre de calcul à l’aide de parenthèses, et privilégiez la lisibilité du code.

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

Itération dans SASS Fonctions SASS