Formateur SCSS

Formatez votre code SCSS avec variables, mixins et nesting.

SCSS Source

Formatage

Options

SCSS Formaté

Guide SCSS

Avantages de SCSS

SCSS (Sassy CSS) étend CSS avec des fonctionnalités puissantes : variables, nesting, mixins, fonctions, et modules. Je l'utilise systématiquement car il rend le CSS maintenable à grande échelle. Le nesting reflète la structure HTML, les mixins évitent la répétition, et les variables centralisent les valeurs.

Fonctionnalités clés

Variables $

$primary-color: #6366f1; réutilisable partout. Modifiez une valeur, tout le site change.

Nesting

Imbriquez les sélecteurs comme la structure HTML. .nav { .item { color: red; } }

Mixins

@mixin flex-center { display: flex; ... } puis @include flex-center;

@use et @forward

Système de modules moderne. Remplace @import pour une meilleure encapsulation.

Bonnes pratiques

  • Évitez le sur-nesting : Maximum 3-4 niveaux. Au-delà, la spécificité explose
  • BEM + nesting : .block { &__element { &--modifier { } } } pour du CSS plat
  • Variables pour tout : Couleurs, espacements, breakpoints, typography
  • Partials : Divisez en fichiers _variables.scss, _mixins.scss, etc.

Questions fréquentes

SCSS vs Sass vs CSS : quelle différence ?

SCSS est la syntaxe moderne de Sass, compatible avec CSS (tout CSS valide est du SCSS valide). Sass original utilise l'indentation sans accolades. CSS est le standard navigateur. SCSS compile vers CSS. La plupart des projets modernes utilisent SCSS.

CSS natif a maintenant des variables : SCSS est-il encore utile ?

Oui ! Les variables CSS (custom properties) sont dynamiques (runtime), les variables SCSS sont statiques (compile time). Utilisez les deux : SCSS pour les calculs/mixins, CSS pour les thèmes dynamiques. Le nesting CSS arrive mais les mixins et @use restent uniques à SCSS.

Comment éviter le CSS trop spécifique avec le nesting ?

Limitez-vous à 3 niveaux de nesting. Utilisez BEM avec le sélecteur parent (&) : .block { &__element { } } génère .block__element (pas .block .block__element). Évitez de nester par structure HTML : nestez par composant logique.

@use vs @import : lequel utiliser ?

@use est le standard moderne. @import est déprécié et sera supprimé. @use offre une meilleure encapsulation (namespace automatique), évite les conflits, et ne charge chaque fichier qu'une fois. Migrez vers @use/@forward pour les nouveaux projets.