Kompilator SCSS ke CSS

Lembar Kerja Sass Browser

Tulis SCSS, kompilasi secara lokal, pratinjau CSS, lalu ekspor lembar gaya yang bersih.

Memuat kompilator Sass

Design token Sistem tombol Kartu responsif Sass berindentasi

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

Tip: tempel partial yang diimpor di atas kode ketika cuplikan Anda bergantung pada file lokal.

Alur kompilasi

Siap

{ }

Input SCSS

⚙

Mesin Sass

CSS

CSS Browser

Sintaksis Kurung kurawal SCSS Sass berindentasi

Gaya output Expanded Nested Compact Compressed

Kompilasi langsung
Kompilasi ulang secara otomatis saat Anda mengedit.

Muat file .scss atau .sass

File dibaca oleh browser Anda dan dimasukkan ke dalam editor.

Menunggu pustaka kompilator.

Kompilasi pertama dimulai setelah mesin Sass siap.

Kompilasi SCSS Bersihkan

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'Tambahkan SCSS sebelum mengompilasi.', 'Tempel sumber SCSS atau muat starter cepat.'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'Mengompilasi SCSS.', 'Mesin Sass sedang mengubah sumber Anda menjadi 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', 'Kompilasi sukses.', 'CSS yang dihasilkan siap untuk disalin, dipratinjau, atau diunduh.'); setFlow('css'); return; } var message = result && result.message ? result.message : 'Periksa sintaksis SCSS dan coba lagi.'; var line = result && result.line ? ' Baris ' + result.line + (result.column ? ', kolom ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'Kesalahan kompilasi.', 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 = '✓ Berhasil Disalin'; 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', 'File tidak dapat dibaca.', 'Pilih file .scss atau .sass UTF-8 lalu coba lagi.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed Kompilator SCSS ke CSS Widget