Перейти к содержимому
Numio

Преобразование Sass в стандартный CSS — Numio

Компилирует Sass с синтаксисом отступов (.sass, без фигурных скобок и точек с запятой) в обычный CSS с помощью Dart Sass, затем запускает Autoprefixer для выбранных целевых браузеров. Переменные, миксины (=name / +name) и вложенность раскрываются в плоские CSS-правила.

Проверить, во что компилируется файл .sass с синтаксисом отступов из старого проекта в духе Rails или Bulma, не настраивая инструменты Sass.

Sass

CSS

Когда пригодится

  • Проверить, во что компилируется файл .sass с синтаксисом отступов из старого проекта в духе Rails или Bulma, не настраивая инструменты Sass.
  • Получить обычный CSS из фрагмента .sass, чтобы вставить его в CMS, шаблон письма или codepen, которые не принимают Sass.

Как пользоваться

  1. Вставьте Sass в редактор Sass или перетащите на него файл .sass.
  2. Откройте Settings, чтобы выбрать цели Autoprefixer: defaults, not ie < 11, last 2 versions, iOS 7, last 3 iOS versions. Изначально включён только "defaults".
  3. Скопируйте результат с панели CSS — это обычный CSS, который можно сразу сохранить как файл .css.

Sass

$primary: #3b82f6
$radius: 6px

=flex-center
  display: flex
  align-items: center

.button
  +flex-center
  border-radius: $radius
  background: $primary
  user-select: none
  &:hover
    background: darken($primary, 10%)

CSS

.button {
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: #3b82f6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.button:hover {
  background: #0b63f3;
}

Подробности и ограничения

Компиляция выполняется на сервере: страница отправляет ваш код на /api/sass-to-css, где вызывается compileString из Dart Sass с синтаксисом отступов. Затем Autoprefixer и форматирование Prettier выполняются в Web Worker в вашем браузере.

Каждый ввод компилируется как отдельный самостоятельный файл. @use или @import собственных partial-файлов завершается ошибкой "Can't find stylesheet to import"; встроенные модули, например @use "sass:math", работают.

Вендорные префиксы зависят от выбранных целей. В примере user-select получает префиксы -webkit- и -moz- при запросе "defaults".

Если ввод не порождает CSS (только переменные, миксины или функции), результатом будет не ошибка, а один CSS-комментарий о том, что CSS не сгенерирован.

FAQ

Чем здесь отличаются Sass и SCSS?

Эта страница ожидает синтаксис отступов: вложенность через отступы, без фигурных скобок и точек с запятой, сокращения =mixin и +include. Для кода с фигурными скобками используйте страницу SCSS to CSS; обе вызывают один и тот же API с разным флагом синтаксиса.

Можно ли импортировать partial-файлы вроде _variables.sass?

Нет. Сервер компилирует только вставленный текст, без файловой системы и путей загрузки, поэтому импорт собственных файлов не работает. Вместо этого вставьте содержимое partial-файла над кодом, который его использует.

Что будет, если файл содержит только переменные или миксины?

Sass не выводит CSS для объявлений, которые нигде не используются, поэтому страница показывает комментарий /* No CSS generated: ... */. Добавьте правило, которое использует переменные или подключает миксин, чтобы получить результат.

Минифицируется ли результат?

Нет. CSS выводится в развёрнутом виде и форматируется Prettier. Вложенные селекторы, такие как &:hover, записываются отдельными правилами, например .button:hover.

Спецификации и справка