CSS Preprocessing

Sass & SCSS

Découvrez la puissance de Sass, le préprocesseur CSS qui révolutionne votre façon d'écrire et d'organiser vos feuilles de style.

🎨 Variables & Mixins
📦 Modularité
🔧 Fonctions & Logique
⚡ Productivité

Pourquoi Sass & SCSS ?

❌ CSS Vanilla

/* CSS traditionnel */ .header { background: #cf649a; } .header__title { color: white; font-size: 2rem; } .header__subtitle { color: rgba(255,255,255,0.8); font-size: 1.2rem; } .button { background: #cf649a; padding: 8px 16px; border-radius: 4px; } .button:hover { background: #b85588; }
  • • Répétition de code
  • • Pas de variables native (avant CSS3)
  • • Maintenance difficile
  • • Pas de réutilisabilité
  • • Code non structuré

✅ Sass (Syntaxe)

// Sass - Syntaxe indentée $primary: #cf649a $primary-dark: darken($primary, 10%) .header background: $primary &__title color: white font-size: 2rem &__subtitle color: rgba(white, 0.8) font-size: 1.2rem =button-style($bg, $padding: 8px 16px) background: $bg padding: $padding border-radius: 4px &:hover background: darken($bg, 10%) .button +button-style($primary)
  • • Variables native
  • • Nesting (imbrication)
  • • Mixins réutilisables
  • • Fonctions intégrées
  • • Syntaxe concise

🚀 SCSS (Sassy CSS)

// SCSS - Syntaxe CSS étendue $primary: #cf649a; $primary-dark: darken($primary, 10%); .header { background: $primary; &__title { color: white; font-size: 2rem; } &__subtitle { color: rgba(white, 0.8); font-size: 1.2rem; } } @mixin button-style($bg, $padding: 8px 16px) { background: $bg; padding: $padding; border-radius: 4px; &:hover { background: darken($bg, 10%); } } .button { @include button-style($primary); }
  • • Compatible CSS existant
  • • Plus populaire que Sass
  • • Syntaxe familière
  • • Transition facile depuis CSS
  • • Toutes les fonctionnalités Sass

⚙️ Processus de Compilation

📝 SCSS Source

$primary: #cf649a; .card { background: $primary; padding: 1rem; &:hover { background: darken($primary, 10%); } }
➤

🎯 CSS Compilé

.card { background: #cf649a; padding: 1rem; } .card:hover { background: #b85588; }
Le navigateur ne voit que du CSS classique !

📝 Syntaxes : Sass vs SCSS

🔄 Comparaison des Syntaxes

Sass (syntaxe indentée)

// Variables $primary-color: #cf649a $font-size-large: 1.5rem $border-radius: 8px // Nesting .card background: white padding: 1rem border-radius: $border-radius .title color: $primary-color font-size: $font-size-large margin-bottom: 0.5rem .content color: #666 line-height: 1.6 &:hover transform: translateY(-2px) box-shadow: 0 4px 15px rgba(0,0,0,0.1)

SCSS (syntaxe CSS étendue)

// Variables $primary-color: #cf649a; $font-size-large: 1.5rem; $border-radius: 8px; // Nesting .card { background: white; padding: 1rem; border-radius: $border-radius; .title { color: $primary-color; font-size: $font-size-large; margin-bottom: 0.5rem; } .content { color: #666; line-height: 1.6; } &:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } }

Sass - Avantages/Inconvénients

✅ Avantages :
  • • Code plus concis (pas de {} ni ;)
  • • Indentation naturelle
  • • Moins de caractères à taper
  • • Syntaxe "Python-like"
❌ Inconvénients :
  • • Sensible à l'indentation
  • • Transition plus difficile depuis CSS
  • • Moins populaire
  • • Courbe d'apprentissage

SCSS - Avantages/Inconvénients

✅ Avantages :
  • • Compatible 100% avec CSS existant
  • • Plus populaire et documenté
  • • Transition facile depuis CSS
  • • Syntaxe familière
⚠️ Inconvénients :
  • • Plus verbeux que Sass
  • • Accolades et point-virgules requis
  • • Fichiers légèrement plus longs

🎯 Recommandation :

**SCSS** est généralement recommandé pour les débutants car il est plus facile à adopter depuis CSS existant. **Sass** est excellent si vous préférez une syntaxe plus concise et n'avez pas peur du changement !

🚀 Fonctionnalités Principales

📦 Variables

// Types de variables Sass/SCSS $primary-color: #cf649a; // Couleur $font-size: 16px; // Taille $font-family: 'Arial', sans-serif; // Police $border-width: 2px; // Nombre $is-rounded: true; // Booléen $margin-sizes: 10px 15px 20px; // Liste $font-weights: ( light: 300, normal: 400, bold: 700 ); // Map // Utilisation .button { color: $primary-color; font-size: $font-size; font-family: $font-family; border: $border-width solid $primary-color; border-radius: if($is-rounded, 8px, 0); font-weight: map-get($font-weights, bold); }

🎮 Variables Dynamiques :

Variables Sass !

🎯 Nesting (Imbrication)

// SCSS avec nesting .navbar { background: $primary-color; padding: 1rem; // Élément enfant .logo { font-size: 1.5rem; font-weight: bold; color: white; } // Liste de navigation .nav-list { list-style: none; display: flex; gap: 1rem; .nav-item { padding: 0.5rem 1rem; a { color: white; text-decoration: none; &:hover { color: lighten($primary-color, 20%); } } } } // Pseudo-sélecteurs avec & &:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.1); } // Modificateurs avec & &--dark { background: darken($primary-color, 20%); } }

🎨 Résultat visuel :

⚠️ Attention :

Évitez l'imbrication trop profonde (max 3 niveaux). Cela peut rendre le CSS final très spécifique et difficile à maintenir.

🔧 Mixins

// Définition de mixins @mixin button-style($bg: $primary-color, $padding: 12px 24px) { background: $bg; color: white; padding: $padding; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; &:hover { background: darken($bg, 10%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba($bg, 0.3); } &:active { transform: translateY(0); } } @mixin flex-center { display: flex; justify-content: center; align-items: center; } @mixin media-query($breakpoint) { @if $breakpoint == mobile { @media (max-width: 767px) { @content; } } @if $breakpoint == tablet { @media (min-width: 768px) and (max-width: 1023px) { @content; } } @if $breakpoint == desktop { @media (min-width: 1024px) { @content; } } } // Utilisation des mixins .btn-primary { @include button-style($primary-color, 16px 32px); } .btn-secondary { @include button-style($secondary-color); } .hero-section { @include flex-center; height: 100vh; @include media-query(mobile) { height: 50vh; flex-direction: column; } }

🎮 Démo Interactive des Mixins :

Bouton avec mixin (petit padding)
Bouton avec mixin (padding moyen)
Bouton avec mixin (gros padding)
💡 Avantages des mixins :
  • • Réutilisation de blocs de code
  • • Paramètres avec valeurs par défaut
  • • Logique conditionnelle avec @if
  • • Contenu dynamique avec @content

⚙️ Fonctions

// Fonctions Sass intégrées $primary: #cf649a; .element { // Manipulation de couleurs background: $primary; border: 1px solid darken($primary, 15%); color: lighten($primary, 40%); &:hover { background: saturate($primary, 20%); } &:active { background: desaturate($primary, 10%); } } // Fonctions personnalisées @function rem($pixels) { @return #{$pixels / 16}rem; } @function color-contrast($color) { @if (lightness($color) > 50%) { @return #000; } @else { @return #fff; } } @function strip-unit($number) { @if type-of($number) == 'number' and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } // Utilisation des fonctions personnalisées .card { font-size: rem(18); padding: rem(16) rem(24); background: $primary; color: color-contrast($primary); } // Fonctions de liste et map $breakpoints: ( small: 480px, medium: 768px, large: 1024px ); @function breakpoint($size) { @return map-get($breakpoints, $size); } .responsive-container { width: 100%; @media (min-width: breakpoint(medium)) { max-width: 1200px; } }

🎨 Démonstration des fonctions :

Couleur originale: #cf649a
darken(15%): #9d4a73
lighten(20%): #e291c0
saturate(15%): #d958a7
📏 Fonctions utilitaires :
// Exemples d'utilisation font-size: rem(18); // 1.125rem color: color-contrast(#cf649a); // #fff width: strip-unit(100px); // 100 breakpoint: breakpoint(medium); // 768px
🔍 Types de fonctions :
  • • Couleurs : darken(), lighten(), saturate()...
  • • Nombres : round(), ceil(), floor()...
  • • Strings : quote(), unquote()...
  • • Listes : length(), nth(), append()...
  • • Maps : map-get(), map-keys()...

🏗️ Architecture & Organisation

📁 Structure de Fichiers Recommandée

scss/ ├── abstracts/ │ ├── _variables.scss │ ├── _mixins.scss │ ├── _functions.scss │ └── _placeholders.scss ├── base/ │ ├── _reset.scss │ ├── _typography.scss │ └── _utilities.scss ├── components/ │ ├── _buttons.scss │ ├── _cards.scss │ ├── _forms.scss │ └── _navigation.scss ├── layout/ │ ├── _header.scss │ ├── _footer.scss │ ├── _sidebar.scss │ └── _grid.scss ├── pages/ │ ├── _home.scss │ ├── _about.scss │ └── _contact.scss ├── themes/ │ ├── _light.scss │ └── _dark.scss ├── vendors/ │ ├── _bootstrap.scss │ └── _jquery-ui.scss └── main.scss

📦 Fichier main.scss :

// main.scss - Point d'entrée // 1. Abstracts @import 'abstracts/variables'; @import 'abstracts/functions'; @import 'abstracts/mixins'; @import 'abstracts/placeholders'; // 2. Vendors @import 'vendors/bootstrap'; // 3. Base @import 'base/reset'; @import 'base/typography'; @import 'base/utilities'; // 4. Layout @import 'layout/header'; @import 'layout/navigation'; @import 'layout/sidebar'; @import 'layout/footer'; // 5. Components @import 'components/buttons'; @import 'components/forms'; @import 'components/cards'; // 6. Pages @import 'pages/home'; @import 'pages/about'; // 7. Themes @import 'themes/light'; @import 'themes/dark';
📏 Règle des 7±2 :

Organisez vos fichiers en maximum 7 catégories pour maintenir une architecture claire et navigable.

🎯 Méthodologies & Conventions

BEM + Sass

// BEM avec Sass .card { // Block background: white; border-radius: 8px; // Elements &__header { padding: 1rem; border-bottom: 1px solid #eee; } &__title { font-size: 1.25rem; font-weight: bold; } &__content { padding: 1rem; } // Modifiers &--featured { border: 2px solid $primary; } &--large { .card__title { font-size: 1.5rem; } } }

BEM (Block Element Modifier) avec la puissance du nesting Sass.

SMACSS

// SMACSS Categories // Base Rules body, h1, p { margin: 0; } // Layout Rules .l-header { /* layout */ } .l-sidebar { /* layout */ } // Module Rules .btn { /* component */ } .card { /* component */ } // State Rules .is-hidden { display: none; } .is-active { /* state */ } // Theme Rules .theme-dark { .btn { background: #333; } }

SMACSS organise le CSS en 5 catégories distinctes.

ITCSS

// ITCSS Triangle inversé // 1. Settings (variables) $primary: #cf649a; // 2. Tools (mixins/functions) @mixin button() { /* */ } // 3. Generic (reset, normalize) * { box-sizing: border-box; } // 4. Elements (HTML elements) h1 { font-size: 2rem; } // 5. Objects (layout patterns) .o-container { /* */ } // 6. Components (UI components) .c-button { /* */ } // 7. Utilities (helpers) .u-hidden { display: none; }

ITCSS structure le CSS du plus générique au plus spécifique.

🛠️ Outils et Build Process

⚙️ Compilation :

CLI Sass (Dart Sass)
# Installation npm install -g sass # Compilation simple sass input.scss output.css # Watch mode sass --watch src/scss:dist/css # Production (compressed) sass --style compressed --no-source-map input.scss output.css
Webpack + sass-loader
// webpack.config.js module.exports = { module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] } };

🎯 Bonnes Pratiques :

🔧 Configuration
{ "scripts": { "sass:dev": "sass --watch src/scss:dist/css --style expanded", "sass:prod": "sass src/scss:dist/css --style compressed --no-source-map", "sass:build": "npm run sass:prod" }, "devDependencies": { "sass": "^1.x.x" } }
⚠️ Points d'attention :
  • • Utilisez Dart Sass (dernière version)
  • • Évitez LibSass (deprecated)
  • • Source maps pour le debug
  • • Compression pour la production
  • • Watch mode pour le développement

🎯 Exercices Pratiques

Exercice 1 : Design System avec Sass

🎨 Créez un design system complet

Objectifs :
  • • Définir des variables pour couleurs, tailles, espacements
  • • Créer des mixins pour boutons, cards, layouts
  • • Utiliser le nesting pour l'organisation
  • • Implémenter des fonctions utilitaires
  • • Structure modulaire avec @import
  • • Thèmes clair/sombre
Structure de départ :
// _variables.scss $primary: #cf649a; $secondary: #3b82f6; $success: #10b981; $space-xs: 0.25rem; $space-sm: 0.5rem; $space-md: 1rem; $breakpoints: ( mobile: 480px, tablet: 768px, desktop: 1024px ); // _mixins.scss @mixin button($bg: $primary) { // Votre code ici } @mixin card($padding: $space-md) { // Votre code ici } // main.scss @import 'variables'; @import 'mixins'; @import 'components';
💡 Conseils :

Commencez par définir vos variables de base, puis créez des mixins réutilisables. Utilisez les fonctions Sass pour manipuler les couleurs et créer des variantes automatiquement.

Exercice 2 : Site Responsive avec SCSS

📱 Site adaptatif avec architecture Sass

Fonctionnalités requises :
  • • Header responsive avec navigation
  • • Grille de produits adaptative
  • • Footer avec liens sociaux
  • • Animations CSS3
  • • Mixins pour breakpoints
  • • Organisation BEM + Sass
  • • Dark mode avec variables
Mixins utiles :
// Breakpoints mixin @mixin respond-to($breakpoint) { @if $breakpoint == mobile { @media (max-width: 767px) { @content; } } @if $breakpoint == tablet { @media (min-width: 768px) { @content; } } } // Grid mixin @mixin grid($cols, $gap: 1rem) { display: grid; grid-template-columns: repeat($cols, 1fr); gap: $gap; @include respond-to(mobile) { grid-template-columns: 1fr; } } // Animation mixin @mixin animate($property: all, $duration: 0.3s) { transition: $property $duration ease; }

Exercice 3 : Framework CSS Personnalisé

🏗️ Créez votre propre micro-framework

Composants à développer :
🎨 Composants UI
  • • Boutons (variants, tailles)
  • • Cards (styles, layouts)
  • • Forms (inputs, validations)
  • • Navigation (menu, breadcrumb)
📐 Système de Layout
  • • Grille flexible
  • • Conteneurs responsives
  • • Utilitaires spacing
  • • Flexbox helpers
🎯 Utilitaires
  • • Classes de couleurs
  • • Helpers typographie
  • • États (show/hide)
  • • Animations
🏆 Challenge Bonus :

Créez un système de génération automatique de classes utilitaires (comme Tailwind) en utilisant les boucles Sass et les maps !

// Exemple de génération automatique $spacings: (1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem); @each $name, $value in $spacings { .p-#{$name} { padding: $value; } .m-#{$name} { margin: $value; } } // Génère: .p-1, .p-2, .m-1, .m-2, etc.

Maîtrisez Sass & SCSS ! 🎨

Vous avez maintenant toutes les clés pour transformer votre façon d'écrire du CSS. Sass révolutionne la productivité et la maintenabilité de vos projets !

📦 Variables

DRY principle et réutilisabilité

🎯 Nesting

Organisation hiérarchique claire

🔧 Mixins

Blocs de code réutilisables

⚙️ Functions

Logique et calculs dynamiques

📚 Documentation Sass 🎮 Sass Playground 🏗️ Architectures CSS