Trình Biên Dịch SCSS Sang CSS

Môi trường làm việc Sass trên trình duyệt

Viết SCSS, biên dịch cục bộ, xem trước CSS, sau đó xuất bảng mã sạch.

Đang tải bộ biên dịch Sass

Design tokens Hệ thống nút Thẻ phản hồi (Responsive) Sass thụt lề

Mã nguồn 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.7 Merit; 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; } }

Mẹo: dán nội dung các tệp partials được import lên phía trên đoạn mã khi đoạn mã của bạn phụ thuộc vào các tệp cục bộ.

Luồng biên dịch

Sẵn sàng

{ }

Đầu vào SCSS

⚙

Công cụ Sass

CSS

CSS trình duyệt

Cú pháp Dấu ngoặc nhọn SCSS Sass thụt lề

Kiểu định dạng đầu ra Expanded Nested Compact Compressed

Biên dịch trực tiếp
Tự động biên dịch lại khi bạn chỉnh sửa.

Tải tệp .scss hoặc .sass

Các tệp sẽ được đọc bởi trình duyệt của bạn và chèn vào trình biên tập.

Đang chờ thư viện biên dịch.

Lần biên dịch đầu tiên sẽ bắt đầu sau khi công cụ Sass sẵn sàng.

Biên dịch SCSS Xóa sạch

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'Vui lòng thêm SCSS trước khi biên dịch.', 'Dán mã nguồn SCSS hoặc tải một ví dụ mẫu nhanh.'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'Đang biên dịch SCSS.', 'Công cụ Sass đang chuyển đổi mã nguồn của bạn thành 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', 'Biên dịch thành công.', 'CSS được tạo ra đã sẵn sàng để sao chép, xem trước hoặc tải xuống.'); setFlow('css'); return; } var message = result && result.message ? result.message : 'Vui lòng kiểm tra lại cú pháp SCSS và thử lại.'; var line = result && result.line ? ' Dòng ' + result.line + (result.column ? ', cột ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'Lỗi biên dịch.', 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 = '✓ Đã sao chép'; 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', 'Không thể đọc tệp.', 'Vui lòng chọn một tệp .scss hoặc .sass định dạng UTF-8 và thử lại.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed Trình Biên Dịch SCSS Sang CSS Widget