CSS · 2 min de lecture · mai 8, 2026
CSS vs SCSS : lequel choisir ?
CSS : la base universelle
Le CSS est le langage de style natif du web, compris directement par tous les navigateurs. Il a énormément évolué : variables (custom properties), calc(), clamp(), container queries… beaucoup de fonctionnalités autrefois réservées aux préprocesseurs sont désormais natives.
SCSS : le CSS sous stéroïdes
SCSS est une syntaxe du préprocesseur Sass. C’est un sur-ensemble du CSS : tout CSS valide est un SCSS valide. Il ajoute des fonctionnalités puissantes qui sont compilées en CSS standard.
Les variables
$primary: #2563eb;
.button { background: $primary; }
L’imbrication
.card {
padding: 1rem;
.title { font-weight: 700; }
&:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
}
Les mixins
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.box { @include flex-center; }
Variables CSS ou variables SCSS ?
La différence clé : les variables SCSS sont statiques (résolues à la compilation), tandis que les variables CSS sont dynamiques (modifiables à l’exécution, en JavaScript ou par thème). Pour le theming et le dark mode, les variables CSS gagnent. Pour des calculs de build et des maps, SCSS reste imbattable.
Quand choisir SCSS ?
- Grands projets avec beaucoup de composants répétitifs.
- Besoin de mixins, boucles et fonctions de couleur.
- Équipes habituées à un pipeline de build.
Quand le CSS suffit ?
- Sites simples ou statiques.
- Projets misant sur les variables CSS et le theming dynamique.
- Volonté d’éviter toute étape de compilation.
Le meilleur des deux mondes
Beaucoup d’équipes écrivent en SCSS tout en utilisant les variables CSS pour le theming. Vous pouvez tester la compilation avec notre outil SCSS to CSS, ou faire l’inverse avec CSS to SCSS.