Compiler SCSS en CSS en ligne — Compilateur Dart Sass navigateur

Compilez un extrait SCSS ou regroupez un dossier de projet local avec résolution native de @use et @import. Le style de sortie, les source maps pour un seul fichier et les avertissements de dépréciation sont configurables, et rien n’est envoyé.

Chargement…
Compilateur SCSS — guide navigateur
Compilez des extraits SCSS en CSS standard avant minification ou partage. Idéal quand le CLI Sass n'est pas installé ou pour un aperçu rapide.

Notes développeur

L’éditeur monofichier utilise la syntaxe SCSS ; les projets regroupés acceptent aussi les fichiers .sass indentés. Déposez un dossier pour résoudre les @import / @use locaux. node_modules, les paquets et les URL distantes ne sont pas résolus. Auto-compilation au collage et chargement d'exemple ; les modifications tapées nécessitent Compiler (⌘↵). Les source maps sont disponibles en monofichier et indisponibles en mode projet v1. Couplez avec beautify-scss ou minify-css pour le pipeline complet.

Regrouper des partials locaux

Choisissez Regrouper un projet, déposez un dossier puis sélectionnez un fichier d’entrée. FastMinify conserve les chemins relatifs et Dart Sass découvre les partials .scss et .sass accessibles via @use ou @import. La limite locale est de 32 Mio par fichier et 32 Mio au total. La v1 accepte une seule entrée, sans source map ni résolution de paquets node_modules.

Options

Style de sortie
Contrôle le formatage CSS : expanded (lisible), compressed (minifié), compact ou nested.
Source map
Ajoute un commentaire sourceMappingURL data: URI inline à la sortie CSS pour le débogage.
Masquer les dépréciations
Masque les avertissements de dépréciation Sass dans la console pour les fonctions built-in legacy.

Quand les équipes choisissent cette voie

Convertir un extrait SCSS d'une doc design system en CSS brut. Prévisualiser la sortie compressed avant collage dans un CMS. Enseigner variables et imbrication SCSS avec retour CSS instantané. Prototyper des mixins sans installer Dart Sass localement.

Exemples commentés

Variables et imbrication

Entrée SCSS

$brand: #336699; $spacing: 8px; .card { padding: $spacing; .title { color: $brand; } }

CSS compilé

.card { padding: 8px; } .card .title { color: #336699; }

Mixin paramétré

Entrée SCSS

@mixin rounded($radius: 4px) { border-radius: $radius; } .btn { @include rounded(8px); background: #eee; }

CSS compilé

.btn { border-radius: 8px; background: #eee; }

Outils associés

Beautifiez SCSS avec beautifier SCSS, décompressez avec déminifier SCSS, ou parcourez le hub préprocesseurs CSS.

FAQ compilateur SCSS

Compilation navigateur uniquement

Pourquoi ne puis-je pas utiliser @import pour des bibliothèques externes ?

Les projets regroupés résolvent les fichiers locaux déposés dans le navigateur. Les chemins vers node_modules, des paquets, des CDN ou hors du dossier déposé ne sont pas disponibles.

Prend-il en charge la syntaxe SASS indentée ?

L’éditeur monofichier utilise la syntaxe SCSS à accolades. Le mode projet accepte aussi les fichiers .sass en syntaxe indentée.

Quand la compilation s'exécute-t-elle automatiquement ?

Au collage et au chargement d'un exemple. Pendant la saisie, utilisez le bouton Compiler ou ⌘↵ — la compilation live à chaque frappe est volontairement désactivée.

Un projet regroupé est-il une simple concaténation ?

Non. Dart Sass part d’un fichier d’entrée et résout uniquement les dépendances @use et @import atteignables. Aucun ordre manuel n’est concaténé. La v1 est limitée à une entrée, 32 Mio au total, sans source map ni imports npm.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Découvrez les autres catégories d'outils