Exemple 1 : Structure minimale avec partials
Commençons avec une structure simple pour un petit projet :
scss/
_variables.scss # Variables globales
_base.scss # Styles de base (reset, body, etc.)
main.scss # Fichier principal (point d'entrée)
Le fichier main.scss sert de point d'entrée et importe tous les partials.
Exemple 2 : Contenu des fichiers avec imports
Voici ce que pourraient contenir ces fichiers :
_variables.scss :
// Variables de couleurs
$primary: #3b82f6;
$secondary: #8b5cf6;
$success: #10b981;
$warning: #f59e0b;
$danger: #ef4444;
// Variables typographiques
$font-family: 'Inter', system-ui, sans-serif;
$font-size-base: 16px;
$line-height-base: 1.6;
// Variables d'espacement
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
// Variables de bordures
$border-radius: 8px;
$border-width: 1px;
_base.scss :
// Reset et styles de base
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: $font-family;
font-size: $font-size-base;
line-height: $line-height-base;
color: #1e293b;
background-color: #f8fafc;
}
// Liens
a {
color: $primary;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// Images responsives
img {
max-width: 100%;
height: auto;
}
main.scss :
// Import des partials (ordre important !)
@import 'variables';
@import 'base';
// Styles spécifiques au projet
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 $spacing-md;
}
.header {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: $spacing-lg 0;
}
Note importante
Ici, nous utilisons encore @import pour la compréhension, car c'est la méthode
la plus intuitive pour débuter. Les alternatives modernes @use et @forward
seront expliquées en détail au chapitre suivant.
Exemple 3 : CSS généré final
Après compilation, voici ce que donnerait le fichier CSS final (extrait) :
/* Contenu de _variables.scss compilé */
/* Contenu de _base.scss compilé */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1e293b;
background-color: #f8fafc;
}
a {
color: #3b82f6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.header {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 24px 0;
}
Comme tu peux le voir, tous les partials sont fusionnés en un seul fichier CSS propre et optimisé.