Passer de SCSS à CSS pur — rapidement et sans douleur

CSS évolue rapidement et rattrape les préprocesseurs. Maintenant, le langage lui-même a déjà des variables, des imbrications, des fonctions de couleur et des calques en cascade, ce pour quoi Sass était utilisé auparavant. Donc, si vous avez encore SCSS dans votre projet, il est peut-être temps de passer à CSS pur. Vous trouverez ci-dessous un guide étape par étape sur la façon de le faire sans douleur et avec plaisir 💅

✅ Liste de contrôle avant la transition

• 🔍 Effectuer un audit de la fonctionnalité Sass (variables, mixins, imbrication, @extend, cycles)

• 🌐 Vérifier la prise en charge dans les navigateurs (pour 2025 : >90 % prennent en charge toutes les fonctionnalités clés)

• 🎯 Commencer par les variables : remplacer $color par --color et utiliser var(--color)

• 🔁 Réécrire les mixins et les fonctions en classes et fonctions CSS (calc(), clamp(), etc.)

• ✂️ Supprimer @extend et les cycles — remplacer par des modèles et des propriétés personnalisées

• 📁 Reconstruire les importations — utiliser @import de manière native ou via un assembleur

• 🧪 Effectuer des tests : tout doit ressembler à ce qu'il était avant

🎨 Exemple 1 : Variables

C'était (SCSS) :

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Devenu (CSS) :

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

🎨 Vous pouvez également utiliser hsl(from var(--color) ...) pour remplacer darken()/lighten().

📦 Exemple 2 : imbrication

SCSS:

.card {
  .header {
    h2 {
      margin: 0;
    }
  }
}

CSS (l'imbrication est prise en charge en mode natif !) :

.card {
  & .header {
    & h2 {
      margin: 0;
    }
  }
}

🌈 Exemple 3 : Fonctions de couleur

SCSS: lighten($color, 10%)

CSS:

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 10%));
}

Ou via color-mix :

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

🧠 Exemple 4 : Fonctions et calculs

SCSS:

@function calculate-width($cols, $total: 12) {
  @return percentage($cols / $total);
}

CSS:

:root {
  --grid-columns: 12;
}
.column-4 {
  width: calc(4 / var(--grid-columns) * 100%);
}

🧩 Exemple 5 : Mixins

SCSS:

@mixin button-style($color) {...}

CSS:

.button {
  color: white;
  background-color: var(--btn-color);
}
.primary-button {
  --btn-color: blue;
}

📱 Exemple 6 : Media & Container Queries

SCSS: @media joint

CSS: requêtes de conteneur :

.sidebar {
  container-type: inline-size;
}
@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

🧰 Où continuer ?

Vous souhaitez approfondir vos connaissances en CSS et apprendre à créer des applications Web à part entière ? 📱✨

Dans l'application Kodik, vous pouvez suivre des cours sur HTML, CSS et JavaScript, apprendre la mise en page et le développement frontend, créer des sites et des animations adaptatifs. Le cours est adapté aussi bien aux débutants qu'à ceux qui veulent systématiser leurs connaissances.

• 🧩 Exercices pratiques

• 🧪 Tests et projets

• 📜 Certificats et diplômes

• 🤖 Aide de l'assistant IA

Apprenez le CSS et devenez développeur frontend avec Kodik !

🎯 Résumé

Sass a fait son travail, mais CSS n'est plus le même. Maintenant, vous pouvez écrire des styles puissants et évolutifs sans préprocesseurs. Commencez avec un composant, et vous serez surpris de voir à quel point tout est devenu plus facile.