Sass в CSS
Компилируйте Sass и SCSS в CSS онлайн. Преобразование в реальном времени с расширенным или сжатым выводом, номерами строк ошибок и полной поддержкой переменных, миксинов и вложенности.
В чём разница между Sass и SCSS?
SCSS — более новый, похожий на CSS синтаксис с фигурными скобками и точками с запятой. Sass (синтаксис с отступами) использует отступы и переводы строк. Этот инструмент компилирует оба варианта — просто выберите синтаксис в списке.
Какие возможности Sass поддерживаются?
Компилятор использует официальный движок Dart Sass: переменные, вложенность, миксины, @include, функции, @use, @extend, управляющие директивы @if и @each, а также сжатый стиль вывода — всё поддерживается.
Как получить сжатый CSS?
Перед компиляцией переключите стиль вывода на «Сжатый». Пробелы и последняя точка с запятой удаляются, и получается максимально компактная таблица стилей.
Почему ошибка показывает номер строки?
Если в коде есть синтаксическая ошибка, движок Sass сообщает точную строку и столбец сбоя разбора, и инструмент показывает их над результатом, чтобы вы быстро всё исправили.
Мой Sass-код отправляется на сервер?
Нет. Полный движок Dart Sass встроен в страницу и компилирует локально в браузере. Ваши таблицы стилей не покидают устройство — безопасно даже для приватных проектов.
Можно ли компилировать @import локальных файлов?
Нет. Компилятор работает с одним фрагментом в памяти и не имеет доступа к вашей файловой системе, поэтому файловые импорты и @use внешних партиалов разрешить нельзя.
Работает ли офлайн?
Да. После того как страница и пакет компилятора загружены, компиляция выполняется целиком на вашем компьютере без подключения к сети.
Как использовать результат?
Скопируйте готовый CSS в буфер обмена или скачайте как style.css кнопками под результатом, затем подключите в HTML или вставьте в таблицу стилей проекта.
Как использовать Sass в CSS
Этот компилятор запускает официальный движок Dart Sass полностью в вашем браузере. Вставьте SCSS или Sass с отступами и мгновенно получите чистый CSS — с поддержкой переменных, миксинов, вложенности и функций, без загрузки на сервер.
- Вставьте свой Sass или SCSS в поле ввода или нажмите «Пример», чтобы загрузить рабочий демо-код с переменной и миксином.
- Выберите в выпадающих списках синтаксис (SCSS или Sass с отступами) и стиль вывода (развернутый или сжатый).
- С включённой «Живой компиляцией» CSS появляется по мере набора; иначе нажмите «Компилировать» вручную.
- При синтаксической ошибке точный номер строки и сообщение показываются над выводом, чтобы вы быстро всё исправили.
- Кнопками «Копировать» или «Скачать» под выводом заберите скомпилированную таблицу стилей как style.css.
Выберите стиль вывода «сжатый», чтобы минифицировать таблицу стилей — удобно для продакшн-сборок прямо из исходника.
Похожие инструменты
- Форматировщик CSS Мгновенно форматируйте и beautify CSS-код. Преобразуйте минифицированный CSS в читаемый код с настраиваемыми параметрами.
- Минификатор CSS Бесплатный онлайн-минификатор CSS. Мгновенно сжимайте и оптимизируйте CSS-код, удаляя пробелы, комментарии и лишние символы. Уменьшайте размер файла для ускорения загрузки сайта.
- Генератор CSS-градиентов Создавайте потрясающие CSS-градиенты визуально. Генерируйте линейные, радиальные и конические градиенты с несколькими цветовыми точками, углами и позициями. Мгновенно копируйте готовый CSS-код.
- Генератор CSS Flexbox Визуальный генератор CSS Flexbox с предпросмотром в реальном времени. Настройте свойства flex и получите готовый CSS-код.
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Тестер HTTP-запросов Тестируйте REST API прямо в браузере. Отправляйте запросы GET, POST, PUT, DELETE с пользовательскими заголовками, телом и параметрами. Мгновенно просматривайте статус, заголовки и JSON-тело ответа.
- Генератор .htaccess Генерация правил .htaccess Apache для перенаправлений, перезаписи, заголовков безопасности, кэширования и др.