Imports & Partials
Organise ton code en modules comme les extensions d'un jeu.
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;
}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.scss4.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
);