Opérations

Manipule tailles, couleurs, unités avec des calculs automatiques.

Imagine : dans ton laboratoire de magie, tu peux transformer les ingrédients directement pendant que tu prépares tes potions. Besoin de doubler une dose ? Mélanger deux essences ? Convertir des mesures ? Pas besoin de sortir ta calculatrice ! SCSS peut faire les opérations mathématiques directement dans ton code. Addition, soustraction, multiplication... même sur les couleurs et les unités.

7.1Opérations mathématiques de base

SCSS peut calculer avec les quatre opérations classiques. Tu peux faire des maths directement dans tes valeurs CSS :

$largeur-base: 300px;
$marge: 20px;

.conteneur {
  width: $largeur-base + $marge * 2;    // 340px
  height: $largeur-base / 2;            // 150px
  padding: $marge - 5px;                // 15px
  margin: $marge * 1.5;                 // 30px
}

Attention à l'ordre de priorité ! Comme en maths, la multiplication et division sont calculées avant l'addition et soustraction. Utilise des parenthèses pour forcer l'ordre :

$base: 10px;

.element {
  // Sans parenthèses : 10 + 5 * 2 = 20px
  margin: $base + 5px * 2;
  
  // Avec parenthèses : (10 + 5) * 2 = 30px  
  padding: ($base + 5px) * 2;
}

7.2Opérations avec les unités

SCSS est intelligent avec les unités. Tu peux additionner des pixels avec des pixels, mais pas des pixels avec des pourcentages :

// ✅ Fonctionne : même unité
$resultat: 10px + 5px;          // 15px
$resultat: 2rem + 1rem;         // 3rem
$resultat: 10px * 2;            // 20px (nombre sans unité)

// ❌ Erreur : unités incompatibles  
$resultat: 10px + 50%;          // Erreur de compilation
$resultat: 2rem + 10px;         // Erreur de compilation

// ✅ Division par un nombre sans unité
$resultat: 20px / 2;            // 10px

7.3La division, cas particulier

La division en SCSS demande de l'attention. Le caractère / est aussi utilisé dans les raccourcis CSS (comme font: 12px/1.5). Pour forcer une division, utilise des parenthèses :

$largeur: 960px;
$colonnes: 12;

.colonne {
  // ❌ Pas une division, juste du CSS classique
  font: 12px/1.5 Arial;
  
  // ✅ Division forcée avec parenthèses
  width: ($largeur / $colonnes);        // 80px
  width: $largeur / $colonnes;          // Marche aussi dans certains contextes
  width: math.div($largeur, $colonnes); // Syntaxe moderne recommandée
}

Syntaxe moderne

Depuis Sass 1.33, la fonction math.div() est recommandée pour les divisions. Elle évite les ambiguïtés et sera obligatoire dans les futures versions.

7.4Opérations sur les couleurs

Les couleurs aussi peuvent subir des opérations ! Tu peux les éclaircir, les assombrir, ou même faire des calculs composante par composante :

$couleur-base: #3498db;

.element {
  // Opérations avec les fonctions de couleur
  background: lighten($couleur-base, 20%);    // Plus clair
  border-color: darken($couleur-base, 15%);   // Plus sombre
  color: complement($couleur-base);           // Couleur complémentaire
  
  // Mélange de couleurs
  box-shadow: 0 0 10px mix($couleur-base, #fff, 50%);
}

7.5Opérations sur les chaînes

Tu peux "additionner" (concaténer) des chaînes de caractères avec + :

$prefixe: "btn";
$suffixe: "large";

.classe-dynamique {
  // Concaténation de chaînes
  background-image: url("images/" + $prefixe + "-" + $suffixe + ".png");
  // Résultat : url("images/btn-large.png")
  
  // Ou plus lisible avec l'interpolation
  background-image: url("images/#{$prefixe}-#{$suffixe}.png");
}

7.6Fonction calc() vs opérations SCSS

Attention à ne pas confondre les calculs SCSS (faits à la compilation) et la fonction CSS calc() (faite par le navigateur) :

$largeur-fixe: 200px;

.element {
  // ✅ Calcul SCSS (fait à la compilation)
  width: $largeur-fixe + 50px;              // Résultat : 250px
  
  // ✅ Calcul CSS (fait par le navigateur)  
  width: calc(100% - #{$largeur-fixe});     // Résultat : calc(100% - 200px)
  
  // ❌ Mélange impossible
  width: 100% - $largeur-fixe;              // Erreur : unités incompatibles
}

Quand utiliser calc() ?

Utilise calc() quand tu mélanges des unités différentes (%, px, vw...) ou quand le calcul doit se faire côté navigateur (responsive design). Utilise les opérations SCSS pour les calculs simples avec des valeurs connues.

7.7Opérations avec les booléens

SCSS supporte aussi les opérateurs logiques pour les conditions :

$mode-sombre: true;
$ecran-large: false;

.element {
  @if $mode-sombre and not $ecran-large {
    background: #333;
    color: white;
  } @else if $mode-sombre or $ecran-large {
    background: #666;
  } @else {
    background: white;
  }
}

7.8Opérateurs de comparaison

Tu peux comparer des valeurs pour créer des conditions dynamiques :

$taille-ecran: 768px;
$seuil-mobile: 600px;

.responsive {
  @if $taille-ecran > $seuil-mobile {
    font-size: 1.2rem;
  } @else {
    font-size: 1rem;
  }
}

// Fonction qui utilise les comparaisons
@function taille-adaptative($base, $multiplicateur: 1.2) {
  @if $base >= 2rem {
    @return $base * $multiplicateur;
  } @else if $base <= 0.8rem {
    @return $base / $multiplicateur;
  } @else {
    @return $base;
  }
}

7.9Modulo et opérations avancées

SCSS supporte l'opérateur modulo (%) pour obtenir le reste d'une division. Très utile pour créer des patterns répétitifs :

// Créer un effet zebré avec modulo
@for $i from 1 through 10 {
  .ligne-#{$i} {
    @if $i % 2 == 0 {
      background: #f0f0f0;  // Lignes paires
    } @else {
      background: white;     // Lignes impaires
    }
  }
}

// Utilisation en fonction
@function couleur-alternee($index, $couleur1, $couleur2) {
  @if $index % 2 == 0 {
    @return $couleur1;
  } @else {
    @return $couleur2;
  }
}

Astuce de performance

Les opérations SCSS sont calculées une seule fois à la compilation, pas à chaque chargement de page. N'hésite donc pas à faire des calculs complexes si ça simplifie ton code !