Chapitre 9 – Fonctions SCSS

Fonctions vs mixins : différence fondamentale

Les mixins servent à réutiliser des blocs de styles complets. Les fonctions, elles, servent à calculer ou transformer des valeurs qui seront ensuite utilisées dans tes propriétés CSS.

SCSS :

// Fonction
@function double($value) {
  @return $value * 2;
}

// Utilisation
.box {
  padding: double(8px);
}

CSS généré :

.box {
  padding: 16px;
}

Ici, la fonction double retourne une valeur (16px) utilisable dans une propriété.

Structure d'une fonction SCSS

Une fonction est définie avec @function et doit obligatoirement utiliser @return pour retourner une valeur.

@function nom($param1, $param2) {
  // calcul ou logique
  @return valeur;
}

Fonction mathématique simple

Une fonction de base pour générer des espacements cohérents.

@function spacing($multiplier) {
  @return 8px * $multiplier;
}

.card {
  padding: spacing(2); // 16px
  margin-bottom: spacing(3); // 24px
}

.card {
  padding: 16px;
  margin-bottom: 24px;
}

Fonction avec valeur par défaut et conditions

Les fonctions peuvent contenir de la logique conditionnelle pour retourner des valeurs différentes selon les paramètres.

@function radius($size: md) {
  @if $size == sm {
    @return 6px;
  } @else if $size == md {
    @return 12px;
  } @else if $size == lg {
    @return 20px;
  } @else {
    @return 12px;
  }
}

.box {
  border-radius: radius(lg);
}

.small-box {
  border-radius: radius(sm);
}

Cas pro : gestion centralisée des espacements

Au lieu de multiplier les variables, on peut créer une fonction dédiée qui applique une échelle d'espacement cohérente.

@function space($level) {
  $base: 8px;
  @return $base * $level;
}

.section {
  margin-bottom: space(4); // 32px
  padding: space(3); // 24px
}

.button {
  padding: space(2) space(3); // 16px 24px
}

Cas pro : adaptation automatique des couleurs

SCSS fournit des fonctions natives très puissantes pour manipuler les couleurs sans créer manuellement chaque variante.

$primary: #7aa7ff;

.button {
  background: $primary;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;

  &:hover {
    background: darken($primary, 8%);
  }

  &:active {
    background: darken($primary, 15%);
  }
}

.card {
  border: 1px solid rgba($primary, 0.2);
  background: lighten($primary, 40%);
}

Guide des bonnes pratiques pour les fonctions SCSS

• Utiliser les fonctions pour les valeurs, pas pour générer du layout complet (privilégier les mixins dans ce cas).
• Donner des noms explicites aux fonctions qui décrivent clairement leur rôle.
• Limiter la complexité logique : une fonction doit faire une chose bien, pas plusieurs.
• Centraliser les fonctions dans un fichier dédié (ex: _functions.scss) pour faciliter la maintenance.
• Documenter les fonctions complexes avec des commentaires expliquant les paramètres attendus.

Erreur 1 : confondre fonction et mixin

Si tu dois écrire des propriétés CSS complètes (plusieurs règles), tu as besoin d'une mixin. Si tu dois calculer une valeur unique (couleur, taille, position), tu as besoin d'une fonction.

Erreur 2 : créer des fonctions trop complexes

Une fonction qui prend 5 paramètres et contient plusieurs niveaux de conditions devient rapidement illisible et difficile à déboguer.

Erreur 3 : oublier le @return

C'est l'erreur la plus courante avec les fonctions : oublier de retourner une valeur avec @return.

@function calculate($value) {
  $result: $value * 2;
  // Oubli du @return ! Erreur de compilation
}