Fonctions SASS

Cet article explique les fonctions SASS.

Nous expliquerons en détail les fonctions SASS, des bases aux sujets avancés, avec des exemples pratiques utiles au travail réel.

YouTube Video

Fonctions SASS

Les fonctions SASS sont de puissants outils permettant d’encapsuler une logique réutilisable dans vos feuilles de style, ce qui rend possible les calculs, le formatage et les branches conditionnelles.

Structure de base et utilisation des fonctions

Les fonctions SASS sont définies avec @function et retournent une valeur avec @return. Les fonctions sont appelées de la même manière que les fonctions intégrées.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Ce code définit une fonction qui double un nombre et l'applique à la largeur. En conséquence, .example { width: 20px; } sera généré.

Arguments, valeurs par défaut et gestion des types

Les fonctions peuvent accepter plusieurs arguments et définir des valeurs par défaut. SASS n'impose pas de typage statique, mais faire attention au format des arguments rend vos fonctions plus robustes.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font a des valeurs par défaut pour scale et unit, et certains arguments peuvent être omis lors de l’appel. Dans cet exemple, une valeur comme font-size: 20px; sera générée.

Utiliser les arguments variadiques (...)

Utilisez les arguments variadiques si vous souhaitez passer plusieurs valeurs. Ceci est utile pour gérer des listes ou plusieurs couleurs.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Un argument variadique tel que $numbers... est traité comme une liste et peut être exploité avec @each. Dans cet exemple, padding: 20px; sera généré.

Retourner et manipuler des listes ou des maps

Les fonctions peuvent aussi retourner des listes (séparées par des espaces ou des virgules) et des maps. Ceci est utile pour retourner des valeurs complexes.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• Une carte (map) est retournée par la fonction, puis les valeurs sont récupérées avec map.get. Cela vous permet de maintenir un système d’espacement cohérent.

Fonctions avec conditions et boucles

@if, @else if, @else, @for, @each et @while peuvent tous être utilisés dans les fonctions. Vous pouvez créer des logiques de calcul avec des conditions et des boucles.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Cette fonction calcule une échelle modulaire et multiplie ou divise selon que le nombre d’étapes est positif ou négatif. modular-scale(3, 1rem, 1.333) retourne une taille de police trois niveaux au-dessus de la base.

Gestion des erreurs et avertissements (@error, @warn)

Vous pouvez interrompre le processus avec @error en cas d’arguments invalides ou d’opérations inattendues, et générer des avertissements avec @warn. L’objectif est d’alerter les utilisateurs de problèmes le plus tôt possible.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Si vous passez des valeurs invalides, une erreur sera générée à la compilation, ce qui facilitera l’identification de la cause. Les vérifications dans les fonctions sont utiles pour identifier rapidement les bogues.

Créer des fonctions spécifiques aux couleurs

En SASS, vous pouvez combiner différentes fonctions de manipulation des couleurs pour créer votre propre palette de couleurs. Ceci est utile pour gérer une palette de couleurs cohérente dans l'ensemble de votre projet.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• Dans cet exemple, color.mix est utilisé pour créer des nuances en mélangeant avec du noir et des teintes en mélangeant avec du blanc. Les valeurs sont retournées dans une liste et peuvent être accessibles avec list.nth.

Remarques sur la performance et le temps de compilation

Les fonctions SASS sont évaluées lors de la compilation. Les boucles lourdes, la récursion profonde ou les opérations massives sur les maps augmentent le temps de compilation. Gardez vos fonctions petites et simples ; si nécessaire, traitez les traitements complexes en dehors de SASS, dans des outils d’automatisation ou des préprocesseurs.

Collection de fonctions utilitaires pratiques

Voici quelques fonctions utilitaires couramment utilisées. Le code est conçu pour être immédiatement utilisable dans des projets réels.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value impose des limites supérieure et inférieure à une valeur, et px-to-rem convertit les valeurs en pixels en rem. Ces deux fonctions simplifient les étapes fréquemment rencontrées en design responsive.

Choisir entre @function et les mixins (@mixin)

Les fonctions servent à retourner des valeurs, tandis que les mixins insèrent des blocs CSS. Si le résultat de la logique est une seule valeur de propriété, utilisez une fonction ; s’il s’agit d’un bloc de styles complet, utilisez un mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Les fonctions retournent des valeurs comme des nombres ou des couleurs à utiliser dans d’autres propriétés, tandis que les mixins insèrent directement des groupes de propriétés. Une séparation claire dans la conception augmente la maintenabilité.

Manipulation de chaînes et considérations sur le format de sortie

Soyez attentif lors de la manipulation des nombres avec unités et des chaînes en SASS. Concaténer une chaîne à un nombre avec unité peut produire un résultat inattendu. Utilisez unquote() ou l’interpolation de chaînes (#{}) si nécessaire.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Pour retourner des pourcentages sous forme de chaînes, gérez la précision avec l’interpolation ou round pour plus de clarté. Pour éviter les bogues, traitez toujours explicitement les types de données lors de la concaténation de résultats de calculs avec des chaînes.

Bonnes pratiques pour les tests et la documentation

Après avoir écrit une fonction, créez de petits fichiers SCSS avec des exemples d’utilisation comme tests, ce qui rend la maintenance plus facile. Vous pouvez documenter pour chaque fonction le type/unité d’entrée, type de retour, comportement en cas d’échec et exemples d’utilisation.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Ajouter des commentaires avec de petits exemples du « résultat attendu » facilite la détection des régressions lors de futurs refactoring. Compiler automatiquement dans un environnement CI et vérifier visuellement le résultat est efficace.

Résumé

Les fonctions SASS sont un moyen puissant d’augmenter la réutilisabilité et la cohérence des styles. Concevez-les pour qu’elles soient simples et légères, et assurez leur robustesse avec @error et @warn. Les fonctions utilitaires pour la couleur, les espacements et la conversion d’unités sont pratiques à regrouper dans une bibliothèque commune. Pour éviter la surcharge à la compilation, envisagez de séparer les traitements complexes dans d’autres étapes du build si nécessaire.

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