Kompilator SCSS do CSS

Środowisko robocze Sass w przeglądarce

Pisz SCSS, kompiluj lokalnie, przeglądaj CSS na żywo, a następnie eksportuj czysty arkusz stylów.

Ładowanie kompilatora Sass

Tokeny projektowe System przycisków Responsywne karty Sass z wcięciami

Źródło 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; } }

Wskazówka: wklej importowane fragmenty (partials) powyżej kodu, gdy Twój skrypt zależy od plików lokalnych.

Przepływ kompilacji

Gotowy

{ }

Wejście SCSS

⚙

Silnik Sass

CSS

Przeglądarkowy CSS

Składnia Klamry SCSS Wcięcia Sass

Styl wyjściowy Rozszerzony (expanded) Zagnieżdżony (nested) Kompaktowy (compact) Skompresowany (compressed)

Kompilacja na żywo
Kompiluj automatycznie podczas edycji.

Wczytaj plik .scss lub .sass

Pliki są odczytywane przez przeglądarkę i umieszczane w edytorze.

Oczekiwanie na bibliotekę kompilatora.

Pierwsza kompilacja rozpocznie się po przygotowaniu silnika Sass.

Skompiluj SCSS Wyczyść

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'Dodaj SCSS przed kompilacją.', 'Wklej źródło SCSS lub załaduj szybki przykład startowy.'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'Kompilowanie SCSS.', 'Silnik Sass przekształca Twój kod źródłowy w 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', 'Skompilowano pomyślnie.', 'Wygenerowany CSS jest gotowy do skopiowania, podglądu lub pobrania.'); setFlow('css'); return; } var message = result && result.message ? result.message : 'Sprawdź składnię SCSS i spróbuj ponownie.'; var line = result && result.line ? ' Linia ' + result.line + (result.column ? ', kolumna ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'Błąd kompilacji.', 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 = '✓ Skopiowano'; 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', 'Nie można odczytać pliku.', 'Wybierz plik .scss lub .sass w kodowaniu UTF-8 i spróbuj ponownie.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed Kompilator SCSS do CSS Widget