Компилятор 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

Стиль вывода Развернутый Вложенный Компактный Сжатый

Живая компиляция
Перекомпилировать автоматически во время редактирования.

Загрузить файл .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