Fonctions

// 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
}

// 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

// 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); }

@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;
}

// 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
}

// 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

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

// 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