Aller au contenu principal

Module SCSS.1 – Pourquoi SCSS ?

Objectif​

Comprendre les problèmes du CSS pur, découvrir les préprocesseurs CSS, et comprendre pourquoi SCSS est essentiel pour créer du CSS industriel et maintenable.

Théorie​

Problèmes du CSS pur​

1. Pas de variables​

CSS pur :

.header {
    background-color: #007bff;
}

.button {
    background-color: #007bff;
}

.link {
    color: #007bff;
}

Problème : Si on change la couleur, il faut modifier partout.

2. Pas de nesting​

CSS pur :

.nav {
    background-color: white;
}

.nav ul {
    list-style: none;
}

.nav ul li {
    display: inline-block;
}

.nav ul li a {
    color: blue;
}

Problème : Répétition du sélecteur parent.

3. Pas de fonctions/mixins​

CSS pur :

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

.button-secondary {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: gray;
    color: white;
}

Problème : Code dupliqué, pas de réutilisabilité.

4. Pas de calculs​

CSS pur :

.container {
    width: 1200px;
}

.sidebar {
    width: 300px;
}

.main {
    width: 900px; /* 1200 - 300, calculé manuellement */
}

Problème : Calculs manuels, erreurs possibles.

5. Organisation limitée​

CSS pur :

  • Un seul fichier ou imports basiques
  • Pas de partials organisés
  • Difficile de scaler

Qu'est-ce qu'un préprocesseur CSS ?​

Préprocesseur = Outil qui étend le CSS avec des fonctionnalités avancées, puis compile en CSS pur.

Processus :

SCSS (source) → Compilation → CSS (navigateur)

Préprocesseurs populaires :

  • Sass/SCSS : Le plus populaire
  • Less : Alternative
  • Stylus : Syntaxe flexible

Pourquoi SCSS ?​

SCSS (Sassy CSS) = Syntaxe de Sass la plus proche du CSS.

Avantages de SCSS​

1. Variables :

$primary-color: #007bff;
$spacing: 1rem;

.button {
    background-color: $primary-color;
    padding: $spacing;
}

2. Nesting :

.nav {
    background-color: white;
    
    ul {
        list-style: none;
        
        li {
            display: inline-block;
            
            a {
                color: blue;
            }
        }
    }
}

3. Mixins :

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

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

4. Fonctions :

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

.main {
    width: calculate-width(1200px, 300px);
}

5. Partials et organisation :

// _variables.scss
$primary-color: #007bff;

// _mixins.scss
@mixin button { }

// main.scss
@import 'variables';
@import 'mixins';

6. Héritage :

.button {
    padding: 10px 20px;
}

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

7. Opérateurs :

.container {
    width: 100% / 3; // Calcul automatique
}

SCSS vs Sass​

Sass (indentation) :

.nav
    background-color: white
    ul
        list-style: none

SCSS (accolades) :

.nav {
    background-color: white;
    ul {
        list-style: none;
    }
}

Recommandation : SCSS (plus proche du CSS, plus facile à apprendre).

Écosystème SCSS​

Outils :

  • Sass : Compilateur officiel
  • Dart Sass : Implémentation moderne (recommandé)
  • Node-sass : Ancien (déprécié)
  • PostCSS : Post-processeur (complémentaire)

Intégration :

  • Webpack : Module bundler
  • Gulp : Task runner
  • Vite : Build tool moderne
  • Parcel : Zero-config bundler

IDE :

  • Extensions VS Code
  • IntelliSense
  • Live compilation

Quand utiliser SCSS ?​

Utiliser SCSS quand :

  • ✅ Projet de taille moyenne à grande
  • ✅ Besoin de maintenabilité
  • ✅ Équipe de développeurs
  • ✅ Design system complexe
  • ✅ Réutilisabilité importante

CSS pur suffit quand :

  • ✅ Petit projet
  • ✅ Prototype rapide
  • ✅ Pas de répétition
  • ✅ Pas besoin de variables

Compilation SCSS​

Processus :

  1. Écrire du SCSS
  2. Compiler en CSS
  3. Navigateur utilise le CSS

Commandes :

# Installation
npm install -g sass

# Compilation
sass input.scss output.css

# Watch (auto-compilation)
sass --watch input.scss:output.css

# Compilation minifiée
sass input.scss output.css --style compressed

Exercices guidés​

Exercice 1 : Installation​

Installez SCSS :

  • Installez Sass (Dart Sass)
  • Vérifiez avec sass --version
  • Testez la compilation

Exercice 2 : Première compilation​

Créez un fichier style.scss :

  • Écrivez du SCSS simple
  • Compilez en CSS
  • Vérifiez le résultat

Exercice 3 : Comparer CSS vs SCSS​

Créez deux versions :

  • Version CSS pure (répétitive)
  • Version SCSS (avec variables, nesting)
  • Comparez la maintenabilité

Exercice 4 : Watch mode​

Utilisez le watch mode :

  • sass --watch scss:css
  • Modifiez le SCSS
  • Observez la compilation automatique

Exercice 5 : Structure de base​

Créez une structure SCSS :

  • Fichier principal main.scss
  • Dossier partials/
  • Importez les partials

❌ Erreurs fréquentes​

Erreur 1 : Penser que SCSS = CSS​

❌ Mauvais :

<link rel="stylesheet" href="style.scss">

✅ Bon :

<link rel="stylesheet" href="style.css">

Pourquoi : Le navigateur ne comprend pas SCSS, il faut compiler.

Erreur 2 : Oublier de compiler​

❌ Mauvais :

  • Modifier SCSS
  • Oublier de compiler
  • Se demander pourquoi ça ne marche pas

✅ Bon :

  • Utiliser watch mode
  • Ou compiler après chaque modification

Pourquoi : SCSS doit être compilé en CSS.

Erreur 3 : Nesting trop profond​

❌ Mauvais :

.nav {
    ul {
        li {
            a {
                span {
                    strong {
                        // Trop profond !
                    }
                }
            }
        }
    }
}

✅ Bon :

.nav {
    ul {
        list-style: none;
    }
    
    a {
        color: blue;
    }
}

Pourquoi : Nesting profond = CSS trop spécifique, difficile à maintenir.

Erreur 4 : Confondre Sass et SCSS​

❌ Mauvais :

// Syntaxe Sass (indentation)
.nav
    background: white

✅ Bon :

// Syntaxe SCSS (accolades)
.nav {
    background: white;
}

Pourquoi : SCSS est plus proche du CSS, plus facile.

Erreur 5 : Pas d'organisation​

❌ Mauvais :

// Tout dans un fichier de 5000 lignes

✅ Bon :

// Partials organisés
@import 'variables';
@import 'mixins';
@import 'components';

Pourquoi : Organisation = maintenabilité.

🚀 Mini-projet​

Mission : Convertir un projet CSS en SCSS

Prenez un projet CSS existant et convertissez-le :

Conversions :

  1. Variables CSS → Variables SCSS
  2. Répétitions → Mixins
  3. Sélecteurs répétitifs → Nesting
  4. Organisation en partials

Structure :

  • _variables.scss
  • _mixins.scss
  • _base.scss
  • main.scss (imports)

Critères :

  • ✅ Variables SCSS utilisées
  • ✅ Nesting approprié (pas trop profond)
  • ✅ Mixins pour code répétitif
  • ✅ Partials organisés
  • ✅ Compilation fonctionnelle

Objectif : Comprendre pourquoi SCSS est essentiel et convertir du CSS en SCSS organisé.

Validation : Vous pouvez passer au module suivant quand vous comprenez les avantages de SCSS, avez installé Sass, et pouvez compiler du SCSS en CSS.