Aller au contenu principal

Module SCSS.3 – Mixins & fonctions

Objectif​

Maîtriser les mixins et fonctions SCSS pour créer du code réutilisable et DRY (Don't Repeat Yourself).

Théorie​

Mixins​

Mixins = Blocs de code réutilisables.

Déclaration :

@mixin button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

Utilisation :

.button-primary {
    @include button;
    background-color: blue;
    color: white;
}

.button-secondary {
    @include button;
    background-color: gray;
    color: white;
}

Compilé :

.button-primary {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background-color: blue;
    color: white;
}

Mixins avec paramètres​

Paramètres :

@mixin button($bg-color, $text-color: white) {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: $bg-color;
    color: $text-color;
}

Utilisation :

.button-primary {
    @include button(blue);
}

.button-secondary {
    @include button(gray, black);
}

Paramètres par défaut :

@mixin button($bg-color: blue, $text-color: white) {
    // ...
}

.button {
    @include button; // Utilise les valeurs par défaut
}

Arguments nommés :

@mixin button($bg-color, $text-color, $padding: 10px 20px) {
    // ...
}

.button {
    @include button($bg-color: blue, $text-color: white);
}

Mixins avec @content​

@content = Permet d'ajouter du contenu dans le mixin.

@mixin media($breakpoint) {
    @media (min-width: $breakpoint) {
        @content;
    }
}

.container {
    width: 100%;
    
    @include media(768px) {
        width: 750px;
    }
    
    @include media(992px) {
        width: 970px;
    }
}

Compilé :

.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Mixins courants​

Clearfix :

@mixin clearfix {
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

.container {
    @include clearfix;
}

Centrage :

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Truncate (texte coupé) :

@mixin truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Responsive :

@mixin respond-to($breakpoint) {
    @if $breakpoint == mobile {
        @media (max-width: 575px) { @content; }
    }
    @else if $breakpoint == tablet {
        @media (min-width: 576px) and (max-width: 991px) { @content; }
    }
    @else if $breakpoint == desktop {
        @media (min-width: 992px) { @content; }
    }
}

.element {
    @include respond-to(mobile) {
        width: 100%;
    }
}

Fonctions SCSS​

Fonctions = Retournent une valeur (pas de CSS généré).

Déclaration :

@function calculate-width($total, $sidebar) {
    @return $total - $sidebar;
}

.main {
    width: calculate-width(1200px, 250px); // 950px
}

Fonctions mathématiques :

@function rem($pixels, $base: 16px) {
    @return ($pixels / $base) * 1rem;
}

.element {
    font-size: rem(24px); // 1.5rem
    padding: rem(16px);   // 1rem
}

Fonctions de couleur :

$primary: #007bff;

.button {
    background-color: $primary;
    border-color: darken($primary, 10%);
    color: lighten($primary, 50%);
}

Fonctions de couleur disponibles :

  • lighten($color, $amount) : Éclaircir
  • darken($color, $amount) : Assombrir
  • saturate($color, $amount) : Saturer
  • desaturate($color, $amount) : Désaturer
  • mix($color1, $color2, $weight) : Mélanger
  • rgba($color, $alpha) : Ajouter transparence

Exemple :

$primary: #007bff;

.button {
    background-color: $primary;
    
    &:hover {
        background-color: darken($primary, 10%);
    }
    
    &:active {
        background-color: darken($primary, 20%);
    }
}

Fonctions personnalisées avancées​

Fonction pour obtenir une couleur depuis une map :

$theme-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
);

@function color($key) {
    @return map-get($theme-colors, $key);
}

.button-primary {
    background-color: color(primary);
}

Fonction pour z-index :

$z-indexes: (
    dropdown: 1000,
    modal: 2000,
    tooltip: 3000
);

@function z($key) {
    @return map-get($z-indexes, $key);
}

.modal {
    z-index: z(modal);
}

Exercices guidés​

Exercice 1 : Mixins de base​

Créez des mixins :

  • button pour les boutons
  • card pour les cartes
  • Utilisez-les dans vos composants

Exercice 2 : Mixins avec paramètres​

Créez un mixin button avec :

  • Paramètre pour la couleur de fond
  • Paramètre optionnel pour la couleur du texte
  • Utilisez-le pour créer plusieurs boutons

Exercice 3 : Mixins avec @content​

Créez un mixin media :

  • Paramètre pour le breakpoint
  • Utilisez @content
  • Créez des media queries responsive

Exercice 4 : Fonctions​

Créez des fonctions :

  • rem() pour convertir px en rem
  • color() pour obtenir une couleur depuis une map
  • Utilisez-les dans vos styles

Exercice 5 : Fonctions de couleur​

Utilisez les fonctions de couleur :

  • darken() pour les hovers
  • lighten() pour les états actifs
  • Créez une palette cohérente

❌ Erreurs fréquentes​

Erreur 1 : Confondre mixin et fonction​

❌ Mauvais :

@mixin calculate($a, $b) {
    @return $a + $b; // Erreur : mixin ne peut pas retourner
}

✅ Bon :

@function calculate($a, $b) {
    @return $a + $b;
}

Pourquoi : Mixin = génère du CSS, Fonction = retourne une valeur.

Erreur 2 : Oublier @content dans le mixin​

❌ Mauvais :

@mixin media($breakpoint) {
    @media (min-width: $breakpoint) {
        // Pas de @content
    }
}

✅ Bon :

@mixin media($breakpoint) {
    @media (min-width: $breakpoint) {
        @content;
    }
}

Pourquoi : @content permet d'injecter du code.

Erreur 3 : Paramètres dans le mauvais ordre​

❌ Mauvais :

@mixin button($text-color, $bg-color) { }

.button {
    @include button(blue, white); // Inversé
}

✅ Bon :

@mixin button($bg-color, $text-color: white) { }

.button {
    @include button(blue); // Ou arguments nommés
}

Pourquoi : Ordre logique ou arguments nommés.

Erreur 4 : Fonction qui génère du CSS​

❌ Mauvais :

@function button-style() {
    padding: 10px; // Erreur : fonction ne peut pas générer CSS
}

✅ Bon :

@mixin button-style() {
    padding: 10px;
}

Pourquoi : Fonction = valeur, Mixin = CSS.

Erreur 5 : Pas de @return dans une fonction​

❌ Mauvais :

@function calculate($a, $b) {
    $result: $a + $b; // Pas de return
}

✅ Bon :

@function calculate($a, $b) {
    @return $a + $b;
}

Pourquoi : Fonction doit retourner une valeur.

🚀 Mini-projet​

Mission : Créer une bibliothèque de mixins et fonctions

Créez un fichier _mixins.scss avec :

Mixins :

  • button($bg-color, $text-color)
  • card($padding, $border-radius)
  • media($breakpoint) avec @content
  • clearfix
  • truncate

Fonctions :

  • rem($pixels) pour convertir en rem
  • color($key) pour obtenir une couleur
  • z($key) pour z-index

Utilisation :

  • Utilisez tous les mixins dans vos composants
  • Utilisez toutes les fonctions dans vos styles
  • Créez des variantes avec paramètres

Critères :

  • ✅ Mixins réutilisables
  • ✅ Fonctions utiles
  • ✅ Paramètres appropriés
  • ✅ Documentation claire
  • ✅ Code DRY

Objectif : Maîtriser les mixins et fonctions pour créer du code réutilisable et maintenable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les mixins, fonctions et avez créé une bibliothèque réutilisable.