Functions

Définition

Fonctions custom qui calculent et retournent une valeur via @return. Contrairement aux mixins, elles ne génèrent pas de CSS mais produisent des valeurs.

Analogie

Une calculatrice : tu lui donnes des chiffres, elle te rend un résultat, pas un objet.

Exemple de code

@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

h1 { font-size: rem(32); } // => 2rem
p { font-size: rem(16); }  // => 1rem

Cas d'usage

Créer des conversions (px->rem), calculs de grille, ou manipulations de couleurs réutilisables.

Termes liés