Formateur SCSS

Formatez votre code SCSS avec variables, mixins et nesting.

SCSS Source

Formatage

Options

SCSS Formaté

Guide complet : SCSS pour des styles CSS maintenables

SCSS : le préprocesseur CSS de référence

SCSS (Sassy CSS) est la syntaxe moderne de Sass, le préprocesseur CSS le plus utilisé dans l'industrie. Créé en 2006, Sass a révolutionné l'écriture des styles en apportant des fonctionnalités de programmation : variables, fonctions, mixins, et modules. Bootstrap, Foundation, Materialize — tous les grands frameworks CSS s'appuient sur SCSS.

J'utilise SCSS sur tous mes projets depuis des années. La différence de maintenabilité est flagrante : un projet de 10 000 lignes de CSS devient gérable quand il est structuré en modules SCSS avec des variables centralisées et des mixins réutilisables.

Fonctionnalités fondamentales SCSS

🏷️ Variables $

$primary: #6366f1; puis color: $primary;. Centralisez couleurs, espacements, typographie. Un changement = tout le site mis à jour.

🗂️ Nesting

.nav { .item { &:hover { } } }. Imbriquez pour refléter la hiérarchie HTML. Le & référence le parent.

🔧 Mixins

@mixin flex-center { display: flex; justify-content: center; } puis @include flex-center;. Réutilisez des blocs de styles.

📦 @use / @forward

Système de modules moderne remplacant @import. Namespaces automatiques, pas de pollutions globale.

Fonctionnalités avancées SCSS

  • Fonctions : @function rem($px) { @return $px / 16 * 1rem; }. Créez vos propres fonctions.
  • Boucles : @for, @each, @while. Générez des classes utilitaires dynamiquement.
  • Conditions : @if, @else. Logique conditionnelle dans vos styles.
  • Maps : $colors: (primary: #6366f1, secondary: #8b5cf6);. Structures de données pour thèmes.
  • Extend : @extend .btn;. Héritage de styles (attention à l'usage excessif).
  • Fonctions built-in : lighten(), darken(), mix(), percentage(), etc.

Architecture SCSS recommandée (7-1 Pattern)

  • abstracts/ : Variables, mixins, fonctions (pas de CSS généré)
  • base/ : Reset, typographie, éléments HTML de base
  • components/ : Boutons, cartes, modals (BEM)
  • layout/ : Header, footer, grid, navigation
  • pages/ : Styles spécifiques à chaque page
  • vendors/ : CSS tiers (normalize, bibliothèques)
  • main.scss : Point d'entrée qui @use tout

Traitement local : confidentialité assurée

Ce formateur utilise css-beautify pour embellir votre code SCSS directement dans votre navigateur. Aucune donnée n'est envoyée à un serveur. Formatez vos styles propriétaires en toute confiance.

Questions fréquentes sur SCSS

SCSS vs Sass vs CSS : quelle différence ?

CSS : Le langage standard compris par les navigateurs.

Sass (syntaxe indentée) : Syntaxe originale sans accolades ni points-virgules, basée sur l'indentation (fichiers .sass).

SCSS : "Sassy CSS", syntaxe moderne avec accolades. Tout CSS valide est du SCSS valide (fichiers .scss).

Les deux compilent vers CSS. SCSS est dominant car plus proche du CSS standard et plus facile à adopter.

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

Oui, absolument ! Les variables CSS et SCSS sont complémentaires :

  • Variables SCSS ($) : Compile-time. Calculs, boucles, conditions. Disparaissent après compilation.
  • Variables CSS (--) : Runtime. Thèmes dynamiques, dark mode, modifications JS.

SCSS offre bien plus que des variables :

  • Mixins (pas d'équivalent CSS)
  • Fonctions custom
  • Boucles et conditions
  • Système de modules @use/@forward

Le nesting arrive en CSS natif, mais les autres fonctionnalités restent uniques à SCSS.

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

Règle d'or : Maximum 3-4 niveaux de nesting.

Problème : .header .nav .menu .item a { } = spécificité trop haute, difficile à overrider.

Solution : BEM + sélecteur parent & :

  • .block { &__element { &--modifier { } } }
  • Génère .block__element--modifier (spécificité basse)

Conseil : Nestez par composant logique, pas par structure DOM.

@use vs @import : lequel utiliser ?

@use est le standard moderne. @import est déprécié et sera supprimé à terme.

Avantages de @use :

  • Namespace automatique : @use 'colors'; colors.$primary;
  • Chaque fichier n'est chargé qu'une fois
  • Pas de pollution du scope global
  • Meilleure encapsulation des modules

Migration : @use 'file' as *; pour répliquer le comportement @import (transition progressive).

Comment configurer SCSS avec Vite, Webpack ou autres ?

Vite : npm install sass suffit. Vite détecte automatiquement.

Webpack : npm install sass sass-loader css-loader style-loader + config loader.

Next.js : npm install sass. Support natif.

Create React App : npm install sass. Support natif.

CLI : npm install -g sass puis sass input.scss output.css --watch.

Mes fichiers SCSS sont-ils sécurisés avec cet outil ?

Oui, totalement. Le formatage s'exécute entièrement dans votre navigateur :

  • css-beautify fonctionne localement en JavaScript
  • Aucune requête réseau n'envoie votre code
  • Vos styles ne quittent jamais votre machine
  • L'outil fonctionne même hors ligne après chargement

Vérifiez dans l'onglet Network des DevTools : zéro transmission de données.