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

Конвертировать SCSS в стандартный CSS — Numio

Компилирует SCSS (.scss, синтаксис с фигурными скобками) в обычный CSS с помощью Dart Sass, затем добавляет вендорные префиксы через Autoprefixer. Переменные, @mixin/@include, вложенность и встроенные модули вроде sass:math раскрываются в плоские CSS-правила.

Получить скомпилированный CSS из фрагмента .scss (например, компонента в стиле Bootstrap), чтобы вставить его в проект без шага сборки Sass.

Scss

CSS

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

  • Получить скомпилированный CSS из фрагмента .scss (например, компонента в стиле Bootstrap), чтобы вставить его в проект без шага сборки Sass.
  • Перед коммитом изменений SCSS разобраться, как раскрываются вложенность, &-селекторы и цветовые функции вроде darken().

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

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

SCSS

$primary: #3b82f6;

@mixin flex-center {
  display: flex;
  align-items: center;
}

.nav {
  @include flex-center;
  ul { list-style: none; }
  a {
    color: $primary;
    &:hover { color: darken($primary, 10%); }
  }
}

CSS

.nav {
  display: flex;
  align-items: center;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: #3b82f6;
}
.nav a:hover {
  color: #0b63f3;
}

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

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

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

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

FAQ

Поддерживаются ли @use "sass:math" и другие встроенные модули?

Да. Встроенные модули, такие как sass:math, sass:color и sass:map, доступны, потому что код компилирует Dart Sass. Не работает только импорт собственных файлов, так как отправляется лишь вставленный текст.

Отправляется ли мой SCSS на сервер?

Да. Страница отправляет код на свой эндпоинт /api/sass-to-css для компиляции. Префиксы и форматирование затем добавляются в вашем браузере. Не вставляйте код, которым вам нельзя делиться.

Можно ли использовать страницу для синтаксиса отступов .sass?

Нет, эта страница компилирует с синтаксисом SCSS, поэтому код на отступах не парсится. Используйте страницу Sass to CSS, которая передаёт тому же API флаг синтаксиса отступов.

Как получить вендорные префиксы для старых браузеров?

Откройте Settings и включите цели вроде "last 2 versions" или "not ie < 11". Выбранные запросы передаются в Autoprefixer как список браузеров.

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