Compilatore SCSS in CSS

Ambiente di lavoro Sass nel browser

Scrivi SCSS, compila localmente, visualizza l'anteprima del CSS, poi esporta un foglio di stile pulito.

Caricamento del compilatore Sass

Design token Sistema di pulsanti Card responsive Sass indentato

Sorgente 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; } }

Suggerimento: incolla i parziali importati sopra il codice quando il tuo frammento dipende da file locali.

Flusso di compilazione

Pronto

{ }

Input SCSS

⚙

Motore Sass

CSS

CSS del browser

Sintassi Graffe SCSS Sass indentato

Stile di output Esteso (Expanded) Annidato (Nested) Compatto (Compact) Compresso (Compressed)

Compilazione in tempo reale
Ricompila automaticamente durante le modifiche.

Carica file .scss o .sass

I file vengono letti dal browser e inseriti nell'editor.

In attesa della libreria del compilatore.

La prima compilazione inizia dopo che il motore Sass è pronto.

Compila SCSS Cancella

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'Aggiungi SCSS prima di compilare.', 'Incolla il sorgente SCSS o carica un esempio rapido.'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'Compilazione SCSS.', 'Il motore Sass sta trasformando il tuo sorgente in 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', 'Compilazione riuscita.', 'Il CSS generato è pronto per essere copiato, visualizzato in anteprima o scaricato.'); setFlow('css'); return; } var message = result && result.message ? result.message : 'Controlla la sintassi SCSS e riprova.'; var line = result && result.line ? ' Riga ' + result.line + (result.column ? ', colonna ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'Errore di compilazione.', 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 = '✓ Copiato'; 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', 'Impossibile leggere il file.', 'Scegli un file .scss o .sass in formato UTF-8 e riprova.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed Compilatore SCSS in CSS Widget