Introduction - Cours SCSS

Introduction à SCSS

Découvre la syntaxe SCSS et ses super-pouvoirs pour ton CSS.

Imagine : tu joues à ton RPG préféré et tu viens de débloquer l'atelier d'enchantement. Au lieu de créer chaque objet à la main, tu peux maintenant utiliser des formules magiques, des ingrédients de base et même automatiser la création d'équipements. SCSS, c'est exactement ça pour ton CSS : un atelier qui te fait gagner du temps et évite les répétitions.

1.1SCSS vs CSS : quelle différence ?

CSS, c'est ton système de craft de base : fonctionnel, mais parfois répétitif. SCSS (Sassy CSS) te donne des outils avancés pour organiser et optimiser ton travail. Le principe : tu écris du SCSS, et l'ordinateur le transforme en CSS classique.

Ton code SCSS (Magique)

// SCSS - avec des variables et de l'imbrication
$couleur-primaire: #3498db;
$marge-standard: 1rem;

.carte {
  background: $couleur-primaire;
  padding: $marge-standard;
  
  &:hover {
    transform: scale(1.05);
  }
}

Le CSS généré (Classique)

/* CSS généré automatiquement */
.carte {
  background: #3498db;
  padding: 1rem;
}

.carte:hover {
  transform: scale(1.05);
}

1.2Pourquoi utiliser SCSS ?

SCSS résout les frustrations du CSS pur :

Variables : stocke tes couleurs et tailles pour les réutiliser partout
Imbrication : écris tes sélecteurs de manière hiérarchique et lisible
Mixins : crée des "recettes" de styles réutilisables
Organisation : divise ton code en plusieurs fichiers
Fonctions : automatise des calculs complexes

1.3Installation et compilation

Pour transformer ton SCSS en CSS, tu as besoin d'un compilateur. Plusieurs options existent :

Extension VS Code : "Live Sass Compiler" (le plus simple pour débuter)
Sass CLI : npm install -g sass puis sass style.scss style.css
Outils de build : Webpack, Vite, Parcel (pour projets avancés)

1.4Structure de fichiers recommandée

Une bonne organisation SCSS ressemble à l'inventaire d'un RPG bien rangé :

styles/
├── main.scss           (fichier principal)
├── abstracts/
│   ├── _variables.scss (couleurs, tailles...)
│   └── _mixins.scss    (recettes réutilisables)
├── base/
│   ├── _reset.scss     (remise à zéro)
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
└── pages/
    └── _home.scss

1.5Le mystère de l'underscore

Tu as remarqué que certains fichiers commencent par un underscore (_) ? C'est pas pour faire joli ! Ces fichiers s'appellent des partiels (partials en anglais).

Voici la règle : quand SCSS voit un fichier qui commence par "_", il se dit "Ah, celui-là c'est juste un ingrédient, pas un plat complet". Du coup :

_variables.scss → Ne génère PAS de fichier CSS
main.scss → Génère main.css

C'est super pratique parce que tu peux organiser ton code en plein de petits fichiers sans te retrouver avec 50 fichiers CSS dans ton dossier final. Tu n'auras qu'un seul main.css qui contient tout !

1.6Le fichier main.scss : le chef cuisinier

Le fichier main.scss (sans underscore), c'est ton chef cuisinier. Son boulot ? Rassembler tous les ingrédients (les partiels) pour créer le plat final.

// main.scss - Le fichier qui importe tout
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/buttons';
@use 'components/cards';
@use 'pages/home';

Quand tu compiles, SCSS lit ce fichier, va chercher tous les partiels mentionnés, les mélange dans l'ordre, et te sort un seul fichier main.css avec tout dedans. Magique non ?

@use vs @import

Tu verras parfois @import dans d'anciens tutos, mais utilise toujours @use ! C'est la syntaxe moderne, plus sûre et plus performante.

En résumé

Underscore = "ingrédient", pas d'underscore = "plat final". Le main.scss rassemble tous les ingrédients, ton navigateur n'a besoin que du plat final !