Конвертер Sass (Indented) в CSS Online
Компилируйте синтаксис Sass с отступами (.sass) в чистый CSS. Бесплатно, в вашем браузере, без Ruby, Dart и Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Сценарии использования
Sass с отступами в CSS без установки чего-либо
Наследие Ruby Sass
Компилируйте файлы .sass из унаследованных проектов на Ruby Sass без необходимости его устанавливать.
Без зависимостей
Не нужны Ruby, Dart, Node.js или npm. Работает прямо в браузере.
Изучение Sass
Попробуйте оригинальный синтаксис Sass с отступами и сразу увидите сгенерированный CSS.
100% конфиденциально
Ваш код Sass никогда не отправляется ни на какой сервер. Компиляция происходит в вашем браузере.
Как это работает
Три шага — никаких сложностей
Вставьте или загрузите файл .sass
Перетащите файл .sass или вставьте код с отступами (без фигурных скобок и точек с запятой). Файлы .scss не поддерживаются.
Мгновенная компиляция
Компилятор Sass обрабатывает ваш код в браузере и мгновенно генерирует валидный CSS. Синтаксические ошибки отображаются с указанием номера строки.
Скопируйте или скачайте CSS
Скопируйте полученный CSS в буфер обмена или скачайте как файл .css, готовый к использованию в любом веб-проекте.
FAQ
Остались вопросы?
Это два разных синтаксиса одного препроцессора Sass. Синтаксис .sass (известный также как «синтаксис с отступами» или «оригинальный Sass») был создан Хэмптоном Кэтлином в 2006 году и использует отступы для определения иерархии правил — без фигурных скобок ({}) и точек с запятой (;), подобно Python или CoffeeScript. Синтаксис .scss (Sassy CSS) был введён в Sass 3 в мае 2010 года и использует те же фигурные скобки и точки с запятой, что и стандартный CSS, что делает его совместимым с существующим CSS и удобным для разработчиков, знакомых с CSS. Данный инструмент компилирует исключительно синтаксис .sass с отступами. Для .scss используйте инструмент scss-to-css.
Хэмптон Кэтлин разработал Sass в 2006 году, будучи веб-разработчиком, под влиянием опыта работы с Haml — ещё одним препроцессором, созданным им для упрощения HTML. Философия состояла в том, что код стилей должен быть чище и лаконичнее, чем CSS: отказ от фигурных скобок и точек с запятой снижал визуальный шум и обеспечивал согласованные отступы, улучшающие читаемость. Первая реализация Sass была написана на Ruby как часть фреймворка Haml для Ruby on Rails. На протяжении нескольких лет Sass был синонимом синтаксиса с отступами и требовал установки Ruby для компиляции.
Синтаксис .sass поддерживает все функции Sass: переменные ($color: #333), вложенность селекторов, миксины (@mixin и @include), наследование через @extend, функции через @function, математические операции, импорт через @use и @forward (современная система модулей Dart Sass, появившаяся в Dart Sass 1.23 в октябре 2019 года как замена @import), директивы управления потоком (@if, @each, @for, @while), интерполяция через #{}, а также оператор родительского селектора &. Единственное отличие от .scss — синтаксическое: отступы вместо скобок и отсутствие точек с запятой.
Существует несколько ситуаций, когда установка компилятора Sass нежелательна или невозможна: при работе на общем компьютере или без прав на установку программ, в ограниченных средах CI/CD, при быстром редактировании файла .sass из унаследованного проекта на Ruby Sass (завершившего поддержку 26 марта 2019 года), при изучении Sass без настройки полной среды разработки, а также для быстрой проверки CSS, генерируемого конкретным фрагментом Sass. Convertir.ai запускает компилятор Sass, скомпилированный в WebAssembly, прямо в вашем браузере — без каких-либо зависимостей от сервера.
Инструмент компилирует синтаксис с отступами (.sass), совместимый с Dart Sass (официальной эталонной реализацией с 2019 года, когда Ruby Sass достиг конца поддержки 26 марта 2019 года, а LibSass был объявлен устаревшим в октябре 2020 года). Подавляющее большинство кода .sass, написанного для Ruby Sass, совместимо с Dart Sass, за исключением системы модулей: @import устарел в Dart Sass и заменён на @use и @forward. Если ваш код .sass активно использует @import, в полученном CSS могут появиться предупреждения об устаревании, однако компиляция по-прежнему будет работать.
У синтаксиса с отступами есть сторонники, утверждающие, что он даёт более чистый и читаемый код: отсутствие фигурных скобок и точек с запятой сокращает количество символов, обязательные отступы улучшают согласованность кода, а синтаксис ближе к современным языкам — Python, CoffeeScript или Pug. Тем не менее .scss доминирует в отрасли: современные CSS-фреймворки (Bootstrap 5, Foundation, Tailwind со своим слоем Sass) используют .scss; типовые среды разработки (webpack, Vite, Parcel) по умолчанию настраивают sass-loader или плагин Vite для .scss; большинство разработчиков привыкли к синтаксису CSS с фигурными скобками. Для новых проектов .scss обычно является более практичным выбором благодаря широкой доступности инструментов, сниппетов и поддержки IDE.
Компиляция Sass в CSS: синтаксис с отступами .sass, наследие Ruby Sass и отличия от .scss
Sass (Syntactically Awesome Style Sheets) был создан Хэмптоном Кэтлином в 2006 году; первую реализацию на Ruby разработал Натан Вайценбаум. Оригинальный синтаксис Sass, известный как «синтаксис с отступами» или просто «Sass» (с расширением .sass), вдохновлён философией Haml — ещё одного препроцессора, созданного Кэтлином для упрощения HTML в приложениях Ruby on Rails. Синтаксис с отступами устраняет два элемента CSS, которые Кэтлин считал лишним визуальным шумом: фигурные скобки ({}), ограничивающие блоки объявлений, и точки с запятой (;), разделяющие отдельные объявления. Вместо них иерархия определяется через отступы — аналогично Python, CoffeeScript или современным версиям Pug (ранее Jade). Это решение делает код .sass заметно компактнее: блок CSS, требующий шести синтаксических символов (открывающая скобка, перенос строки, точка с запятой, перенос строки, закрывающая скобка), сводится к одному лишь отступу. Первая публичная версия Sass была выпущена в ноябре 2006 года как часть фреймворка Haml для Ruby on Rails, и в первые годы существования компиляция Sass требовала установленного Ruby.
В мае 2010 года Sass 3 представил синтаксис SCSS (Sassy CSS, расширение .scss), созданный как надмножество CSS: любой валидный CSS-файл является также валидным SCSS-файлом. Это стратегическое решение резко ускорило принятие Sass в отрасли, поскольку разработчики могли переносить существующие CSS-проекты на SCSS простым переименованием файла. Bootstrap перешёл на Sass (в варианте SCSS) в Bootstrap 3.0 в августе 2013 года, что закрепило SCSS как де-факто стандарт CSS-препроцессоров. Dart Sass, текущая эталонная реализация Sass, был запущен Натали Вайценбаум и командой Google в качестве основной реализации в ноябре 2016 года. Ruby Sass достиг конца поддержки 26 марта 2019 года, а LibSass (реализация на C++, используемая в node-sass) был официально объявлен устаревшим в октябре 2020 года. С тех пор Dart Sass — единственная активно поддерживаемая реализация, полностью поддерживающая синтаксис .sass наряду с SCSS.
Необходимость компилировать синтаксис .sass без установки Ruby, Dart или Node возникает в нескольких практических контекстах. Наиболее распространённый — поддержка унаследованных проектов: тысячи веб-проектов, разработанных с 2006 по 2014 год, используют синтаксис .sass с Ruby Sass; когда разработчику нужно изменить стили одного из таких проектов без воссоздания оригинальной среды разработки (которая может требовать конкретной версии Ruby, gem Sass определённой версии и, возможно, Bundler с Gemfile), онлайн-компилятор является самым быстрым решением. Другой контекст — образование: синтаксис Sass с отступами часто преподаётся на курсах веб-разработки как пример CSS-препроцессоров, поскольку наглядно иллюстрирует концепцию вложенности и наследования селекторов; студенты, изучающие Sass в ограниченной учебной среде (Chromebook, компьютерный класс, изолированная среда), не могут устанавливать локальные компиляторы. Наконец, конвертация .sass в CSS — первый шаг при миграции проектов с синтаксиса с отступами на SCSS или на современные решения на базе PostCSS, нативных CSS-переменных (поддерживаются во всех современных браузерах с 2017 года) или CSS Nesting (спецификация CSS Nesting, реализованная в Chrome 112, Firefox 117 и Safari 16.5, делающая большинство функций вложенности Sass избыточными для проектов, ориентированных только на современные браузеры).