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. Style de sortie, source maps monofichier et avertissements de dépréciation configurables — rien n'est envoyé.
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
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
CSS compilé
Mixin paramétré
Entrée SCSS
CSS compilé
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
Minifier
Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.
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.
Encodage
Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.
Sérialisation
Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.
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.
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.
Outils couleur & CSS
Vérification de contraste WCAG en collage local avec syntaxe couleur CSS moderne — vues paire et matrice, jamais envoyé.
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.
Outils HTTP
cURL, messages HTTP, URLs, HAR et Cookie / Set-Cookie collés dans le navigateur — formater et inspecter, jamais envoyé.
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.
IA & LLM
Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.
Données de test
Valeurs de champs synthétiques pour fixtures et seed DB — d'abord des numéros de téléphone en plages réservées.