Fonctions

Crée des calculs personnalisés pour automatiser tes valeurs.

Imagine : dans ton atelier d'alchimie, tu as une balance magique qui peut calculer automatiquement les bonnes proportions d'ingrédients. Tu lui donnes une recette et elle te sort la quantité exacte dont tu as besoin. Les fonctions SCSS, c'est pareil : tu leur donnes des paramètres, elles font les calculs à ta place et te retournent une valeur précise. Contrairement aux mixins qui génèrent du CSS complet, les fonctions te donnent juste le résultat d'un calcul.

6.1Anatomie d'une fonction

Une fonction SCSS se définit avec @function, fait ses calculs, puis retourne une valeur avec @return :

// Fonction pour convertir des pixels en rem
@function px-to-rem($pixels, $base: 16px) {
  @return $pixels / $base * 1rem;
}

// Utilisation
.titre {
  font-size: px-to-rem(24px);    // Retourne : 1.5rem
  margin-bottom: px-to-rem(16px); // Retourne : 1rem
}

Tu vois la différence avec un mixin ? La fonction retourne juste une valeur, pas un bloc de CSS.

6.2Fonctions mathématiques utiles

Les fonctions sont parfaites pour automatiser des calculs répétitifs. Voici quelques exemples pratiques :

// Calculer un pourcentage
@function percentage($valeur, $total) {
  @return ($valeur / $total) * 100%;
}

// Arrondir à un nombre de décimales
@function round-decimal($nombre, $decimales: 2) {
  $multiplicateur: 1;
  @for $i from 1 through $decimales {
    $multiplicateur: $multiplicateur * 10;
  }
  @return round($nombre * $multiplicateur) / $multiplicateur;
}

// Calculer une progression arithmétique
@function progression($base, $ratio, $etape) {
  @return $base * pow($ratio, $etape);
}

// Utilisation
.colonne-1 { width: percentage(1, 12); }    // 8.33333%
.prix { font-size: round-decimal(1.2456rem, 1); } // 1.2rem  
.taille-h3 { font-size: progression(1rem, 1.2, 2); } // 1.44rem

6.3Fonctions pour la couleur

SCSS a des fonctions de couleur intégrées, mais tu peux créer les tiennes pour des besoins spécifiques :

// Créer une couleur avec opacité
@function alpha-color($couleur, $opacity) {
  @return rgba($couleur, $opacity);
}

// Mélanger deux couleurs selon un pourcentage
@function melange($couleur1, $couleur2, $pourcentage: 50%) {
  @return mix($couleur1, $couleur2, $pourcentage);
}

// Obtenir une couleur contrastée (sombre ou claire)
@function couleur-contraste($couleur) {
  @if lightness($couleur) > 50% {
    @return #333; // Couleur sombre pour fond clair
  } @else {
    @return #fff; // Couleur claire pour fond sombre
  }
}

// Utilisation
.overlay { background: alpha-color(#000, 0.8); }
.bouton-special { background: melange(#ff0000, #0000ff, 30%); }
.texte-auto { color: couleur-contraste(#3498db); }

6.4Validation et gestion d'erreurs

Tes fonctions peuvent vérifier les paramètres et afficher des erreurs utiles avec @error et @warn :

@function em($pixels, $base: 16px) {
  // Vérification du type
  @if type-of($pixels) != number {
    @error "Le paramètre $pixels doit être un nombre, reçu : #{type-of($pixels)}";
  }
  
  @if type-of($base) != number {
    @error "Le paramètre $base doit être un nombre, reçu : #{type-of($base)}";
  }
  
  // Vérification de la valeur
  @if $base == 0 {
    @error "Le paramètre $base ne peut pas être zéro (division impossible)";
  }
  
  // Avertissement pour des valeurs étranges
  @if $base < 10px or $base > 24px {
    @warn "Valeur de $base inhabituelle : #{$base}. Vous êtes sûr ?";
  }
  
  @return $pixels / $base * 1em;
}

@error vs @warn

@error arrête la compilation avec un message d'erreur. @warn affiche un avertissement mais continue la compilation. Utilise @error pour les erreurs critiques, @warn pour les situations suspectes.

6.5Fonctions avec les listes et maps

Les fonctions deviennent vraiment puissantes quand elles manipulent des listes et des maps :

// Map des breakpoints
$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

// Fonction pour récupérer un breakpoint
@function get-breakpoint($nom) {
  @if map-has-key($breakpoints, $nom) {
    @return map-get($breakpoints, $nom);
  } @else {
    @error "Breakpoint '#{$nom}' introuvable. Breakpoints disponibles : #{map-keys($breakpoints)}";
  }
}

// Fonction pour créer une liste d'espacements
@function create-spacing($base, $multiplicateurs...) {
  $list: ();
  @each $mult in $multiplicateurs {
    $list: append($list, $base * $mult);
  }
  @return $list;
}

// Utilisation
@media (max-width: get-breakpoint(tablet)) {
  .responsive { font-size: 0.9rem; }
}

.element {
  margin: create-spacing(0.5rem, 1, 2, 3, 4); // 0.5rem 1rem 1.5rem 2rem
}

6.6Fonctions récursives

Les fonctions peuvent s'appeler elles-mêmes pour résoudre des problèmes complexes :

// Calculer factorielle (n!)
@function factorielle($n) {
  @if $n <= 1 {
    @return 1;
  } @else {
    @return $n * factorielle($n - 1);
  }
}

// Générer une progression géométrique
@function fibonacci($n) {
  @if $n <= 2 {
    @return 1;
  } @else {
    @return fibonacci($n - 1) + fibonacci($n - 2);
  }
}

// Utilisation pour créer des espacements harmonieux
.element-1 { margin-bottom: fibonacci(5) * 1px; } // 5px
.element-2 { margin-bottom: fibonacci(6) * 1px; } // 8px
.element-3 { margin-bottom: fibonacci(7) * 1px; } // 13px

6.7Organiser tes fonctions

Comme pour les autres éléments SCSS, organise tes fonctions par catégorie :

abstracts/
├── _functions-math.scss     // Calculs mathématiques
├── _functions-color.scss    // Manipulation de couleurs
├── _functions-string.scss   // Manipulation de chaînes
└── _functions-units.scss    // Conversions d'unités

6.8Fonctions natives SCSS à connaître

SCSS fournit déjà de nombreuses fonctions intégrées. Voici les plus utiles :

// Fonctions mathématiques
$resultat: round(3.7);       // 4
$resultat: ceil(3.2);        // 4
$resultat: floor(3.8);       // 3
$resultat: abs(-5);          // 5
$resultat: min(1, 2, 3);     // 1
$resultat: max(1, 2, 3);     // 3

// Fonctions de couleur
$couleur: lighten(#3498db, 20%);    // Éclaircit
$couleur: darken(#3498db, 20%);     // Assombrit
$couleur: saturate(#3498db, 30%);   // Plus saturé
$couleur: desaturate(#3498db, 30%); // Moins saturé
$couleur: complement(#3498db);       // Couleur complémentaire

// Fonctions de chaîne
$resultat: to-upper-case("hello");  // "HELLO"
$resultat: str-length("hello");     // 5
$resultat: str-index("hello", "ll"); // 3

// Fonctions de type
$type: type-of(42);          // number
$type: type-of("hello");     // string
$type: type-of(#fff);        // color

Conseil de performance

Avant de créer une fonction personnalisée, vérifie si SCSS n'a pas déjà une fonction native qui fait ce dont tu as besoin. Les fonctions natives sont optimisées et plus rapides !