Compiler SCSS en CSS en ligne — Compilateur SCSS navigateur

Compilez SCSS en CSS standard avec Dart Sass dans votre navigateur. Style de sortie, source maps et avertissements de dépréciation configurables — 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

• Syntaxe SCSS uniquement — les fichiers .sass indentés ne sont pas pris en charge. • Les @import / @use externes (node_modules, CDN, autres fichiers) ne peuvent pas être résolus dans le navigateur — collez tout le code dans l'éditeur. • Auto-compilation au collage et chargement d'exemple ; les modifications tapées nécessitent Compiler (⌘↵). • Les source maps sont inlinées en commentaire data: URI dans la sortie CSS. • Couplez avec beautify-scss ou minify-css pour le pipeline complet.

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 ?

Cet outil s'exécute entièrement dans votre navigateur sans accès au système de fichiers. Les chemins @import ou @use pointant vers node_modules, CDN ou d'autres fichiers du projet ne peuvent pas être résolus. Collez le SCSS complet dont vous avez besoin dans l'éditeur.

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

Non — seule la syntaxe SCSS à accolades (.scss) est prise en charge. Les fichiers .sass indentés sont hors périmètre.

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.

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.

Compiler LESS en CSS

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.