คอมไพเลอร์ SCSS เป็น CSS

พื้นที่ทำงาน Sass บนเบราว์เซอร์

เขียน SCSS, คอมไพล์ภายในเครื่อง, พรีวิว CSS แล้วส่งออกสไตล์ชีตที่สะอาดตา

กำลังโหลดตัวคอมไพเลอร์ Sass

โทเค็นการออกแบบ ระบบปุ่ม การ์ดแบบตอบสนอง (Responsive) Sass แบบเยื้อง

ซอร์สโค้ด 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; } }

คำแนะนำ: วางไฟล์ย่อย (partials) ที่นำเข้ามาไว้เหนือโค้ดเมื่อส่วนของโค้ดนั้นขึ้นอยู่กับไฟล์ในเครื่อง

ขั้นตอนการคอมไพล์

พร้อม

{ }

อินพุต SCSS

⚙

เอนจิน Sass

CSS

เบราว์เซอร์ CSS

ไวยากรณ์ ปีกกา SCSS Sass แบบเยื้อง

รูปแบบผลลัพธ์ Expanded Nested Compact Compressed

คอมไพล์แบบสด
คอมไพล์ใหม่โดยอัตโนมัติในขณะที่คุณแก้ไข

โหลดไฟล์ .scss หรือ .sass

ไฟล์จะถูกอ่านโดยเบราว์เซอร์ของคุณและวางลงในโปรแกรมแก้ไข

กำลังรอไลบรารีตัวคอมไพเลอร์

การคอมไพล์ครั้งแรกจะเริ่มต้นหลังจากที่เอนจิน Sass พร้อมใช้งาน

คอมไพล์ SCSS ล้างค่า

'; } function compileScss() { var text = source.value || ''; var serial = ++compileSerial; if (!text.trim()) { lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(''); setStatus('error', 'โปรดเพิ่ม SCSS ก่อนทำการคอมไพล์', 'วางซอร์สโค้ด SCSS หรือโหลดตัวอย่างเริ่มต้นอย่างรวดเร็ว'); setFlow('source'); return; } waitForSass(function () { setFlow('engine'); setStatus('pending', 'กำลังคอมไพล์ SCSS', 'เอนจิน Sass กำลังแปลงซอร์สโค้ดของคุณเป็น 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', 'คอมไพล์สำเร็จแล้ว', 'CSS ที่สร้างขึ้นพร้อมที่จะคัดลอก พรีวิว หรือดาวน์โหลดแล้ว'); setFlow('css'); return; } var message = result && result.message ? result.message : 'โปรดตรวจสอบไวยากรณ์ SCSS แล้วลองอีกครั้ง'; var line = result && result.line ? ' บรรทัดที่ ' + result.line + (result.column ? ', คอลัมน์ที่ ' + result.column : '') + '.' : ''; lastCss = ''; output.value = ''; updateMetrics(''); renderPreview(''); renderWarnings(text); setStatus('error', 'เกิดข้อผิดพลาดในการคอมไพล์', 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 = '✓ คัดลอกแล้ว'; 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', 'ไม่สามารถอ่านไฟล์ได้', 'โปรดเลือกไฟล์ .scss หรือ .sass แบบ UTF-8 แล้วลองอีกครั้ง'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed คอมไพเลอร์ SCSS เป็น CSS Widget