Конвертер SCSS в CSS Online
Компилируйте SCSS/Sass в чистый CSS в браузере. Без npm, без Node.js, без установки.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Компилятор SCSS в CSS
Зачем использовать этот компилятор SCSS?
Нулевая конфигурация
Без npm install, без webpack, без Vite. Вставьте SCSS — получите CSS за секунды.
Официальный Dart Sass
Используется официальный компилятор Dart Sass (WebAssembly). Полная совместимость с современным стандартом.
Полная конфиденциальность
Всё выполняется в браузере. Ваш код не отправляется ни на какой сервер.
Миксины, переменные, вложенность
Полная поддержка: $переменные, &:селекторы, @mixin/@include, @extend и циклы.
Как это работает
Три шага — никаких сложностей
Напишите или вставьте SCSS
Вставьте ваш SCSS или Sass в редактор. Поддерживаются переменные, вложенность, миксины, функции и родительские селекторы (&).
Мгновенная компиляция
Результат в виде чистого CSS автоматически появляется в правой панели. Компилятор работает локально в браузере.
Скопируйте или скачайте CSS
Скопируйте сгенерированный CSS в буфер обмена или скачайте как файл .css, готовый для продакшена.
FAQ
Остались вопросы?
У Sass два синтаксиса. Оригинальный (расширение .sass, создан в 2006 году) использует отступы вместо фигурных скобок и точек с запятой — он более компактный, но несовместим со стандартным CSS. SCSS (Sassy CSS, расширение .scss) был представлен в Sass 3.0 в 2010 году с синтаксисом, полностью совместимым с CSS: любой валидный CSS является валидным SCSS. SCSS быстро стал де-факто стандартом и именно его используют большинство разработчиков. Инструмент поддерживает оба синтаксиса.
Переменные SCSS определяются с префиксом $ и могут хранить цвета, размеры, шрифты или любые значения CSS. Например: $primary-color: #3498db; $base-font: 'Inter', sans-serif; $spacing: 16px. Они используются непосредственно в свойствах: color: $primary-color. В отличие от нативных переменных CSS (--variable), переменные SCSS разрешаются во время компиляции и отсутствуют в выходном CSS. Для динамического доступа в runtime (с JavaScript) подходят именно нативные переменные CSS.
В сообществе SCSS действует негласное правило: не более 3–4 уровней вложенности. Глубокая вложенность создаёт очень специфичные CSS-селекторы (.component .block .element .modifier), трудно перекрываемые и без необходимости повышающие специфичность. Методология BEM (Block-Element-Modifier) хорошо сочетается с SCSS, ограничивая вложенность 1–2 уровнями при сохранении чёткой структуры. Родительский селектор & удобен для псевдоклассов (&:hover, &:focus) и модификаторов (& .active) без семантического увеличения глубины.
Да. Миксины — одна из основ SCSS: определяются с помощью @mixin name($params) и вызываются через @include name(values). Они позволяют повторно использовать блоки CSS с вариациями — то, чего стандартный CSS достиг лишь частично с помощью нативных переменных. Также поддерживаются @extend (наследование селекторов), @function (пользовательские функции), @each, @for и @while (циклы), а также @if/@else (условные конструкции).
Есть случаи, когда настройка среды Node.js непрактична: быстрое исследование SCSS без создания проекта, работа на машине без прав на установку пакетов, живая демонстрация, проверка CSS-вывода конкретного сниппета или просто изучение синтаксиса. Инструмент использует официальный компилятор Dart Sass (эталонная реализация, актуальная с момента устаревания LibSass в октябре 2020 года), скомпилированный в WebAssembly, обеспечивая полную совместимость с современным стандартом SCSS.
LibSass — реализация Sass на C/C++, используемая npm-пакетом node-sass, — долгие годы была самым популярным способом компиляции SCSS в Node.js-проектах. Команда Sass признала LibSass устаревшим в октябре 2020 года, поскольку он не успевал за новыми спецификациями. Dart Sass — официальная реализация, написанная на Dart и публикуемая как чистый JavaScript для npm под именем пакета sass — с тех пор является эталонной. Если вы используете node-sass, рекомендуется перейти на пакет sass; в большинстве случаев это прямая замена без изменений.
SCSS в CSS онлайн: компилируйте Sass без npm или Node.js в браузере
Sass (Syntactically Awesome Style Sheets) — язык препроцессинга CSS, созданный Хэмптоном Кэтлином и разработанный главным образом Натали Вайзенбаум (основным автором на протяжении большей части истории) и Крисом Эпштейном. Первая версия была выпущена в ноябре 2006 года в составе фреймворка Haml для Ruby. Оригинальный синтаксис использовал отступы вместо фигурных скобок — по образцу Python и YAML, — что делало его компактным, но несовместимым с существующим CSS. Этот барьер принятия стал катализатором для создания SCSS (Sassy CSS), представленного в Sass 3.0 в октябре 2010 года: нового синтаксиса, полностью совместимого с CSS3, где любой валидный CSS-файл является одновременно валидным SCSS. Ключевые возможности SCSS — переменные с префиксом $, вложенность селекторов, родительский селектор & для псевдоклассов и вариантов, директивы @mixin и @include для повторного использования кода, @extend для наследования — решили проблемы поддерживаемости чистого CSS в масштабах промышленной разработки.
Экосистема CSS-препроцессоров переживала расцвет между 2012 и 2018 годами. LESS (создан Алексисом Сельером в 2009 году) был первым серьёзным конкурентом Sass: использовал @ вместо $ для переменных и получил массовое распространение благодаря Bootstrap 3 (2013). Stylus (создан TJ Holowaychuk в 2010 году) предложил ещё более гибкий синтаксис, но с меньшей аудиторией. SCSS выиграл битву за экосистему частично благодаря переходу Bootstrap 4 (2018, мигрировавшего с LESS на SCSS), частично через интеграцию в фреймворки вроде Compass (Крис Эпштейн, 2009) с расширенными функциями и автоматическими спрайтами, а частично — за счёт статуса стандарта в Angular. Реализации Sass существенно эволюционировали: Ruby Sass (2006–2019, оригинальная реализация, более не поддерживается), LibSass (реализация на C/C++, используемая node-sass, признана устаревшей в октябре 2020 года) и Dart Sass (текущая эталонная реализация, выпущенная в 2016 году и доступная как npm-пакет sass с 2018 года).
Потребность в онлайн-компиляторе SCSS возникает в конкретных ситуациях фронтенд-разработки. Наиболее частая — быстрое исследование: разработчик хочет проверить компиляцию конкретного миксина, убедиться в работе цветовой функции или понять CSS-вывод определённого паттерна вложенности без создания нового проекта. Ближайшая альтернатива — официальный Sass Playground (sass-lang.com/playground), однако его интерфейс минималистичен и не предлагает дополнительных функций, например быстрого копирования или скачивания. Другой случай — работа в средах без прав на установку: корпоративные машины с ограничениями npm, среды CI/CD только для чтения или обучающие сессии, где нельзя гарантировать наличие Node.js у всех участников. Компилятор Convertir.ai использует Dart Sass, скомпилированный в WebAssembly, работающий полностью в браузере со скоростью, сопоставимой с нативным компилятором, не отправляя ни строки кода на внешние серверы. Это делает его безопасным для компиляции стилей продакшен-проектов или проприетарного кода.