Imports & partials

Organise ton code en modules comme les extensions d'un jeu.

Imagine : tu joues à un sandbox comme Minecraft. Au lieu de tout construire dans un seul monde gigantesque et bordélique, tu peux créer des dimensions séparées : une pour tes fermes, une pour tes châteaux, une pour tes redstone... Puis tu te téléportes entre elles quand tu en as besoin. Les imports et partials SCSS, c'est exactement ça : diviser ton code en petits fichiers spécialisés et les assembler au moment voulu.

4.1Rappel : pourquoi diviser son code ?

Un seul gros fichier SCSS de 2000 lignes, c'est l'enfer à maintenir. Tu cherches ton style de bouton ? Bonne chance ! Avec les partials, tu organises logiquement :

_variables.scss → toutes tes variables
_buttons.scss → tous tes boutons
_cards.scss → toutes tes cartes
_header.scss → ton header

Résultat : tu sais exactement où chercher, et plusieurs développeurs peuvent bosser en parallèle sans se marcher dessus.

4.2@use : la nouvelle syntaxe moderne

Pour importer un partial, utilise @use (et oublie @import qui est obsolète). La syntaxe est simple :

// main.scss
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'components/buttons';
@use 'components/cards';

SCSS va automatiquement chercher les fichiers _variables.scss, _mixins.scss, etc. Tu remarques qu'on ne met ni l'underscore ni l'extension : SCSS est intelligent !

4.3Utiliser les variables d'un autre fichier

Quand tu importes un fichier avec @use, ses variables ne sont pas automatiquement disponibles. Tu dois les préfixer avec le nom du fichier. C'est plus verbeux mais plus sûr (pas de conflits) :

// _variables.scss
$couleur-primaire: #3498db;
$marge-standard: 1rem;

// _buttons.scss
@use 'abstracts/variables';

.bouton {
  // On préfixe avec le nom du fichier
  background: variables.$couleur-primaire;
  margin: variables.$marge-standard;
}

4.4Raccourcir avec les alias

Écrire variables.$couleur-primaire à chaque fois, c'est lourd. Tu peux créer un alias plus court :

// Alias avec "as"
@use 'abstracts/variables' as v;
@use 'abstracts/mixins' as m;

.bouton {
  background: v.$couleur-primaire;  // Plus court !
  margin: v.$marge-standard;
}

.carte {
  @include m.ombre-douce;  // Utilise un mixin avec l'alias
}

4.5Import global avec l'étoile (*)

Si tu veux retrouver l'ancien comportement (variables disponibles directement), tu peux utiliser as *. Mais attention aux conflits de noms !

// Import global (à utiliser avec parcimonie)
@use 'abstracts/variables' as *;

.bouton {
  background: $couleur-primaire;  // Directement accessible
  margin: $marge-standard;
}

Conseil de pro

Utilise l'import global as * uniquement pour les fichiers de variables ou de fonctions utilitaires. Pour les mixins et autres, préfère les alias courts pour garder la traçabilité.

4.6Organisation par dossiers

Une architecture SCSS bien pensée ressemble à ça. Chaque dossier a son rôle :

scss/
├── main.scss                  # Chef d'orchestre
├── abstracts/                 # Outils et configurations
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/                      # Styles de base
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _base.scss
├── components/                # Composants réutilisables
│   ├── _buttons.scss
│   ├── _cards.scss
│   ├── _forms.scss
│   └── _navigation.scss
├── layout/                    # Structure de page
│   ├── _header.scss
│   ├── _footer.scss
│   └── _sidebar.scss
└── pages/                     # Styles spécifiques aux pages
    ├── _home.scss
    ├── _about.scss
    └── _contact.scss

4.7L'ordre d'import est crucial

L'ordre dans lequel tu importes tes fichiers dans main.scss détermine l'ordre dans le CSS final. Respecte cette logique :

// main.scss - L'ordre compte !

// 1. Configuration et outils (pas de CSS généré)
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'abstracts/functions';

// 2. Styles de base (reset, typo...)
@use 'base/reset';
@use 'base/typography';
@use 'base/base';

// 3. Layout (structure générale)
@use 'layout/header';
@use 'layout/footer';

// 4. Composants (éléments réutilisables)
@use 'components/buttons';
@use 'components/cards';

// 5. Pages (styles spécifiques)
@use 'pages/home';
@use 'pages/about';

4.8Import conditionnel et configuration

Tu peux configurer tes partials en définissant des variables avant de les importer. C'est comme passer des paramètres à tes "modules" :

// _boutons.scss - Configurable
$couleur-bouton: #3498db !default;
$taille-bouton: 1rem !default;

.bouton {
  background: $couleur-bouton;
  font-size: $taille-bouton;
}

// main.scss - Configuration avant import
@use 'abstracts/variables';

// Configuration du thème des boutons
@use 'components/boutons' with (
  $couleur-bouton: variables.$couleur-danger,
  $taille-bouton: 1.2rem
);

Architecture en pratique

Commence simple avec 3-4 fichiers, puis divise au fur et à mesure que ton projet grandit. Un bon indicateur : si tu fais défiler plus de 100 lignes pour trouver un style, il est temps de créer un nouveau partial !