SCSS CSS 컴파일러

브라우저 Sass 워크벤치

SCSS를 작성하고 로컬에서 컴파일한 뒤, CSS를 미리보고 깨끗한 스타일시트로 내보내세요.

Sass 컴파일러 로딩 중

디자인 토큰 버튼 시스템 반응형 카드 인덴트형 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', '파일을 읽을 수 없습니다.', 'UTF-8 형식의 .scss 또는 .sass 파일을 선택하고 다시 시도하십시오.'); }; reader.readAsText(file); }); updateMetrics(''); renderPreview(''); setFlow('source'); compileScss(); })(); });

Embed SCSS CSS 컴파일러 Widget