Module 4.3 – SCSS

Objectif

Comprendre pourquoi utiliser SCSS, maîtriser les variables, l'imbrication, et organiser le style de manière professionnelle.

Théorie

Pourquoi SCSS ?

SCSS (Sassy CSS) est un préprocesseur CSS qui étend CSS avec des fonctionnalités avancées.

Avantages :

• Variables : Réutiliser des valeurs
• Imbrication : Structure plus claire
• Mixins : Blocs de code réutilisables
• Fonctions : Calculs et transformations
• Organisation : Diviser en plusieurs fichiers

Workflow :

1. Écrire du code SCSS (.scss)
2. Compiler en CSS (.css)
3. Utiliser le CSS dans le HTML

Installation

Via npm (Node.js requis) :

npm install -g sass

Compiler un fichier :

sass input.scss output.css

Compiler avec surveillance (auto-compile) :

sass --watch input.scss:output.css

Variables

Les variables permettent de stocker des valeurs réutilisables.

Syntaxe :

$nom-variable: valeur;

Exemples :

// Couleurs
$primary-color: #2563eb;
$secondary-color: #64748b;
$text-color: #1e293b;

// Tailles
$font-size-base: 16px;
$spacing-unit: 8px;

// Utilisation
h1 {
    color: $primary-color;
    font-size: $font-size-base * 1.5;
    margin-bottom: $spacing-unit * 2;
}

Avantages :

• Changement centralisé (modifier une variable change partout)
• Cohérence des valeurs
• Maintenance facilitée

Imbrication

Permet d'imbriquer les sélecteurs pour une structure plus claire.

CSS classique :

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

SCSS avec imbrication :

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

Attention : Ne pas trop imbriquer (maximum 3-4 niveaux).

Mixins

Les mixins sont des blocs de code réutilisables.

Définition :

@mixin nom-mixin($parametre) {
    propriété: $parametre;
    autre-propriété: valeur;
}

Utilisation :

@include nom-mixin(valeur);

Exemple :

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

@mixin button-style($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

// Utilisation
.container {
    @include flex-center;
}

.btn-primary {
    @include button-style($primary-color, white);
}

Fonctions SCSS

SCSS fournit des fonctions utiles.

Fonctions de couleur :

$primary: #2563eb;

.light {
    background: lighten($primary, 20%);
}

.dark {
    background: darken($primary, 20%);
}

.transparent {
    background: rgba($primary, 0.5);
}

Fonctions mathématiques :

$base-size: 16px;

.small {
    font-size: $base-size * 0.75;  // 12px
}

.large {
    font-size: $base-size * 1.5;   // 24px
}

Créer sa propre fonction :

@function calculate-width($columns, $gap) {
    @return ($columns * 100px) + ($gap * ($columns - 1));
}

.grid {
    width: calculate-width(3, 20px);  // 340px
}

Héritage (@extend)

Permet d'hériter des styles d'un autre sélecteur.

%button-base {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

.secondary-button {
    @extend %button-base;
    background: gray;
    color: black;
}

Organisation en fichiers

Diviser le SCSS en plusieurs fichiers pour une meilleure organisation.

Structure :

styles/
├── main.scss          // Fichier principal
├── _variables.scss    // Variables (le _ signifie partial)
├── _mixins.scss       // Mixins
├── _base.scss         // Styles de base
├── _components.scss   // Composants
└── _layout.scss       // Layout

main.scss :

// Imports
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';

Partials

Les fichiers partiels (commençant par _) ne sont pas compilés seuls, ils sont importés.

// _variables.scss
$primary-color: #2563eb;

// main.scss
@import 'variables';  // Le _ est optionnel

Exercice

1. Installer SCSS

   • Installez Sass via npm
   • Vérifiez l'installation : sass --version

2. Créer des variables

   • Créez un fichier _variables.scss
   • Définissez des variables pour :
     • Couleurs principales
     • Tailles de police
     • Espacements
   • Utilisez-les dans votre CSS

3. Utiliser l'imbrication

   • Refactorisez votre CSS existant avec l'imbrication
   • Organisez les sélecteurs de manière hiérarchique

4. Créer des mixins

   • Créez un mixin pour les boutons
   • Créez un mixin pour flexbox center
   • Utilisez-les dans votre code

5. Organiser en fichiers

   • Divisez votre SCSS en plusieurs fichiers
   • Créez _variables.scss, _mixins.scss, main.scss
   • Importez tout dans main.scss

6. Compiler

   • Compilez votre SCSS en CSS
   • Utilisez la surveillance automatique
   • Vérifiez que le CSS généré fonctionne

Quiz

1. Que signifie SCSS ?

   • Super CSS
   • Sassy CSS
   • Simple CSS

2. Comment déclare-t-on une variable SCSS ?

   • var nom = valeur;
   • $nom: valeur;
   • nom: valeur;

3. Que permet l'imbrication ?

   • Rendre le code plus rapide
   • Structurer le code de manière hiérarchique
   • Ajouter des animations

4. Que fait un mixin ?

   • Change les couleurs
   • Réutilise un bloc de code
   • Compile le SCSS

5. Comment importer un fichier partial ?

   • @include 'fichier'
   • @import 'fichier'
   • import 'fichier'

Mini défi

Mission : Refactoriser votre CSS en SCSS

Transformez votre projet CSS en SCSS bien organisé :

Structure à créer :

styles/
├── main.scss
├── _variables.scss
├── _mixins.scss
├── _base.scss
├── _layout.scss
└── _components.scss

Contenu de chaque fichier :

1. _variables.scss

   • Toutes les variables (couleurs, tailles, espacements)
   • Au moins 10 variables bien nommées

2. _mixins.scss

   • Mixin pour flexbox center
   • Mixin pour boutons
   • Mixin pour media queries
   • Au moins 3 mixins utiles

3. _base.scss

   • Reset CSS
   • Styles de base (body, typographie)
   • Utilisation des variables

4. _layout.scss

   • Structure de la page
   • Container, header, footer
   • Grid/Flexbox layouts

5. _components.scss

   • Styles des composants (boutons, cartes, etc.)
   • Utilisation des mixins

6. main.scss

   • Imports de tous les fichiers
   • Styles globaux si nécessaire

Critères :

• ✅ Structure organisée en fichiers
• ✅ Utilisation extensive des variables
• ✅ Au moins 3 mixins créés et utilisés
• ✅ Imbrication appropriée (pas trop profonde)
• ✅ Code compilé fonctionne correctement
• ✅ Code plus maintenable qu'avant

Objectif : Maîtriser SCSS pour écrire du CSS plus organisé et maintenable.

---

Validation : Vous pouvez passer au module suivant quand vous maîtrisez SCSS et avez organisé votre code en fichiers modulaires.