SCSS в CSS — онлайн-компилятор Sass

Что умеет компилятор

Это Dart Sass — эталонная реализация Sass, работающая в вашем браузере. Поддерживается весь язык: переменные, вложенность с &, миксины и @include, @extend, функции, карты, циклы, условия @if и модульная система с @use для встроенных модулей, например sass:math и sass:color.

SCSS и Sass с отступами

SCSS — надмножество CSS с фигурными скобками и точками с запятой: любой корректный CSS является корректным SCSS. Более старый синтаксис с отступами (файлы .sass) использует отступы вместо скобок и переносы строк вместо точек с запятой. Оба варианта компилируются в один и тот же CSS, поэтому выберите тот, который используется в ваших файлах.

Импорт других файлов

Браузер не может читать другие файлы вашего проекта, поэтому @use "variables" или @import "mixins" из ваших партиалов здесь не сработают. Вставьте содержимое партиалов выше кода, который их использует. Предупреждения об устаревании из Sass, например для darken(), выводятся под результатом вместе с рекомендуемой заменой.

Конфиденциальность по умолчанию

Компиляция полностью выполняется в вашем браузере — код никуда не отправляется, поэтому его безопасно использовать для закрытых проектов.

Также ищут как: sass в css, компилятор scss онлайн, компилятор sass онлайн, scss compiler, sass компилятор.

Инструменты, которые хорошо сочетаются с SCSS в CSS

• LESS в CSS компилятор — Вставьте код Less и получите обычный CSS, скомпилированный официальным движком Less.js прямо в браузере.
• CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
• Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
• Конвертер CSS в Tailwind — Вставьте правила или объявления CSS и получите эквивалентные утилитарные классы Tailwind для каждого селектора, включая состояния hover: и произвольные значения, например p-[13px].