CSS vs SCSS : comprendre les différences clés

🧭 Introduction

Lorsque l’on débute en développement web, on apprend rapidement à utiliser le CSS pour styliser ses pages. Mais très vite, on découvre un autre mot qui revient souvent : SCSS. Ce langage, souvent présenté comme une évolution du CSS, semble plus puissant, plus structuré. Alors, quelle est la différence entre CSS et SCSS ? Faut-il apprendre les deux ? Et surtout, dans quels cas utiliser l’un plutôt que l’autre ?

Cet article vous guide pas à pas pour comprendre les différences, avantages et limites de chacun, avec des exemples concrets à la clé.

🔍 Contexte

En développement web, la gestion des styles est une brique essentielle. Une bonne organisation du CSS est indispensable pour maintenir un projet lisible et évolutif. Or, à mesure que les projets grandissent, le CSS pur montre rapidement ses limites : répétition de code, mauvaise lisibilité, difficulté à maintenir des fichiers volumineux.

C’est dans ce contexte qu’apparaît SCSS, une surcouche du CSS proposée par le préprocesseur Sass. L’objectif : apporter des outils supplémentaires pour structurer et réutiliser efficacement les styles (variables, fonctions, mixins, imbrications…).

SCSS est donc une amélioration syntaxique, entièrement compatible avec CSS, et vise à répondre aux défis d’un développement web moderne.

🛠️ Explication ou Étapes

Qu'est-ce que le CSS ?

CSS (Cascading Style Sheets) est le langage standard utilisé pour styliser les pages web. Il permet de définir les couleurs, les polices, les espacements, les animations, etc.

Un exemple de CSS classique :

1body {
2  background-color: #f2f2f2;
3  font-family: Arial, sans-serif;
4}
5
6h1 {
7  color: #333;
8  margin-bottom: 20px;
9}

Qu'est-ce que le SCSS ?

SCSS (Sassy CSS) est une syntaxe du langage Sass, un préprocesseur CSS. SCSS ajoute des fonctionnalités avancées qui n’existent pas en CSS natif. Il faut ensuite compiler le SCSS pour obtenir un fichier CSS utilisable dans le navigateur.

Voici le même exemple en SCSS, avec une variable :

1$main-color: #333;
2
3body {
4  background-color: #f2f2f2;
5  font-family: Arial, sans-serif;
6}
7
8h1 {
9  color: $main-color;
10  margin-bottom: 20px;
11}

Fonctionnalités principales du SCSS

✅ Variables

Définir une couleur, une taille, une police et la réutiliser partout.

1$primary: #3498db;
2$padding: 16px;
3
4button {
5  background-color: $primary;
6  padding: $padding;
7}

✅ Imbrication

Écrire les styles de manière hiérarchique, plus lisible :

1nav {
2  ul {
3    list-style: none;
4
5    li {
6      display: inline-block;
7
8      a {
9        text-decoration: none;
10      }
11    }
12  }
13}

✅ Mixins

Créer des blocs réutilisables avec des paramètres :

1@mixin center {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7.container {
8  @include center;
9}

✅ Fonctions

Effectuer des opérations ou transformations dynamiques :

1$base-size: 16px;
2
3p {
4  font-size: $base-size * 1.2;
5}

✅ Inheritance (@extend)

Réutiliser les propriétés d’un autre sélecteur :

1.message {
2  padding: 10px;
3  border: 1px solid #ccc;
4}
5
6.success {
7  @extend .message;
8  border-color: green;
9}

💡 Exemples concrets

Exemple 1 : Gestion de thème avec SCSS

Plutôt que de dupliquer les couleurs partout, on centralise avec des variables :

1$light-bg: #ffffff;
2$dark-bg: #1e1e1e;
3$text-light: #f9f9f9;
4$text-dark: #222;
5
6body.light {
7  background-color: $light-bg;
8  color: $text-dark;
9}
10
11body.dark {
12  background-color: $dark-bg;
13  color: $text-light;
14}

Exemple 2 : Boutons personnalisés

Utilisation de mixins pour générer plusieurs styles de boutons :

1@mixin button-style($color) {
2  background-color: $color;
3  border: none;
4  color: white;
5  padding: 12px 20px;
6  border-radius: 5px;
7}
8
9.button-primary {
10  @include button-style(#3498db);
11}
12
13.button-success {
14  @include button-style(#2ecc71);
15}

Exemple 3 : Organisation modulaire

SCSS encourage l’organisation par fichiers partiels :

1// _variables.scss
2$main-color: #ff4757;
3
4// _buttons.scss
5@import 'variables';
6
7.button {
8  background-color: $main-color;
9  padding: 10px 15px;
10}
11
12// style.scss
13@import 'variables';
14@import 'buttons';

Cette séparation améliore grandement la lisibilité et la maintenance dans les projets complexes.

✅ Conclusion

Le CSS reste indispensable et constitue la base de la mise en forme des sites web. Cependant, dès que votre projet prend de l’ampleur, SCSS devient un allié précieux : il structure, simplifie et optimise le code. Grâce à ses variables, mixins, fonctions et imbrications, vous écrivez un style plus clair, plus DRY (Don't Repeat Yourself) et bien plus facile à maintenir.

Apprendre SCSS, c’est gagner en efficacité et adopter de bonnes pratiques de développement web moderne. Pour aller plus loin, n’hésitez pas à explorer les outils comme Sass Modules, les conventions de nommage (BEM), ou encore des frameworks comme Tailwind CSS, qui apportent une approche différente mais complémentaire.