Compilateur SCSS en CSS

Espace de travail Sass sur navigateur

Écrivez du SCSS, compilez-le localement, prévisualisez le CSS, puis exportez une feuille de style propre.

Chargement du compilateur Sass

Jetons de design Système de boutons Cartes responsives Sass indenté

Source SCSS $brand: #2563eb; $accent: #059669; $surface: #ffffff; $radius: 14px; @mixin soft-shadow($color) { box-shadow: 0 16px 36px rgba($color, 0.16); } .compiler-demo { display: grid; gap: 1rem; padding: 1.25rem; border-radius: $radius; background: $surface; border: 1px solid rgba($brand, 0.18); @include soft-shadow($brand); &__badge { display: inline-flex; width: fit-content; padding: 0.35rem 0.7rem; border-radius: 999px; color: $accent; background: rgba($accent, 0.1); font-weight: 800; } &__button { border: 0; border-radius: $radius - 4px; color: #ffffff; background: linear-gradient(135deg, $brand, $accent); padding: 0.75rem 1rem; &:hover { transform: translateY(-2px); filter: saturate(1.15); } } } @for $i from 1 through 3 { .compiler-demo__step-#{$i} { animation-delay: #{$i * 80}ms; } }

Astuce : collez les partiels importés au-dessus du code lorsque votre extrait dépend de fichiers locaux.

Flux de compilation

Prêt

{ }

Entrée SCSS

⚙

Moteur Sass

CSS

CSS du navigateur

Syntaxe Accolades SCSS Sass indenté

Style de sortie Étendu Imbriqué Compact Compressé

Compilation en direct
Recompiler automatiquement pendant que vous éditez.

Charger un fichier .scss ou .sass

Les fichiers sont lus par votre navigateur et placés dans l'éditeur.

En attente de la bibliothèque du compilateur.

La première compilation commencera dès que le moteur Sass sera prêt.

Compiler le SCSS Effacer

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'Ajoutez du SCSS avant de compiler.', 'Collez une source SCSS ou chargez un démarrage rapide.'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'Compilation du SCSS.', 'Le moteur Sass transforme votre source en CSS.'); runSassCompile(text, getSassOptions(), function (result) { if (serial !== compileSerial) return; if (result && (result.status === 0 || result.text)) { lastCss = result.text || ''; output.value = lastCss; updateMetrics(lastCss); renderPreview(lastCss); renderWarnings(text); setStatus('ok', 'Compilé avec succès.', 'Le CSS généré est prêt à être copié, prévisualisé ou téléchargé.'); setFlow('css'); return; } var message = result && result.message ? result.message : 'Vérifiez la syntaxe SCSS et réessayez.'; var line = result && result.line ? ' Ligne ' + result.line + (result.column ? ', colonne ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'Erreur de compilation.', message + line); setFlow('source'); }); }, 0); } function scheduleCompile() { if (!autoCompile.checked) return; window.clearTimeout(compileTimer); compileTimer = window.setTimeout(compileScss, 360); } function copyText(text, button) { if (!text) return; function done() { var old = button.textContent; button.textContent = '✓ Copié'; window.setTimeout(function () { button.textContent = old; }, 1200); } if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text); done(); }); return; } fallbackCopy(text); done(); } function fallbackCopy(text) { var temp = document.createElement('textarea'); temp.value = text; temp.setAttribute('readonly', 'readonly'); temp.style.position = 'fixed'; temp.style.left = '-9999px'; document.body.appendChild(temp); temp.select(); document.execCommand('copy'); document.body.removeChild(temp); } function downloadCss() { if (!lastCss) return; var blob = new Blob([lastCss], {type: 'text/css;charset=utf-8'}); var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'compiled.css'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } document.querySelectorAll('[data-preset]').forEach(function (button) { button.addEventListener('click', function () { var preset = presets[button.getAttribute('data-preset')]; if (!preset) return; source.value = preset.code; syntax.value = preset.syntax; compileScss(); }); }); source.addEventListener('input', scheduleCompile); syntax.addEventListener('change', compileScss); outputStyle.addEventListener('change', compileScss); autoCompile.addEventListener('change', function () { if (autoCompile.checked) compileScss(); }); compileButton.addEventListener('click', compileScss); clearButton.addEventListener('click', function () { source.value = ''; compileScss(); }); copyButton.addEventListener('click', function () { copyText(lastCss || output.value, copyButton); }); downloadButton.addEventListener('click', downloadCss); fileInput.addEventListener('change', function () { var file = fileInput.files && fileInput.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function () { source.value = String(reader.result || ''); syntax.value = /\.sass$/i.test(file.name) ? 'sass' : 'scss'; compileScss(); }; reader.onerror = function () { setStatus('error', 'Le fichier n\'a pas pu être lu.', 'Choisissez un fichier .scss ou .sass au format UTF-8 et réessayez.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed Compilateur SCSS en CSS Widget