Компілятор SCSS та Sass

Компілюйте вставлені фрагменти SCSS/Sass або локальні файли .scss/.sass безпосередньо у вашому браузері. Ваша таблиця стилів не завантажується, не реєструється та не надсилається до API.

Натисніть, щоб вибрати файл SCSS/Sass або перетягніть його сюди

Також ви можете вставити SCSS/Sass безпосередньо в редактор нижче.

0 байт

0 байт

Готово

Компіляція в браузері

Компіляція проводиться локально за допомогою офіційної реалізації Dart Sass. Ніякі стилі не надсилаються на сервери Convertr.

Введення фрагмента та файлу

Вставте частковий SCSS, повні таблиці стилів, вкладені правила, змінні, міксіни або завантажте локальний файл .scss.

Безпечне вимірювання

Аналітика використовує лише діапазони розміру та зменшення. Джерела SCSS, змінні, міксини та назви файлів залишаються поза телеметрією.

Поширені запитання

Чи завантажується мій SCSS у Convertr?

Ні. Компілятор SCSS працює локально за допомогою JavaScript у браузері. Вставлений SCSS і вибрані файли не надсилаються на сервери Convertr.

Що відбувається, якщо у SCSS є синтаксична помилка?

Помилка компілятора з номерами рядків і стовпців відображається на панелі попереджень, щоб ви могли знайти і виправити помилку.

Чи підтримує це @import або віддалені залежності?

Ні. Для забезпечення швидкості, офлайн-доступності та конфіденційності, віддалені імпорти та доступ до файлової системи вимкнено в цьому браузерному компіляторі.

Пов'язані інструменти розробника

Мініфікатор CSS Стиснути таблиці стилів CSS Конвертер кольорів CSS Конвертуйте кольори CSS Генератор CSS-градієнтів Створення CSS градієнтів локально HTML мініфікатор Стиснути фрагменти HTML Мінімізатор JavaScript Стиснути код JavaScript Інструменти розробника Переглянути браузерні інструменти

Компілятор SCSS

Скомпілюйте підтримуваний синтаксис SCSS у CSS за допомогою вбудованого компілятора браузера.

Вхід
Вихідний код SCSS та параметри стилю виводу.
Вихід
скомпільований CSS або діагностика компілятора.
Реальні обмеження
Компілятор браузера не вирішує довільні імпорти проектів, не виконує плагіни збірки та не гарантує відповідність іншій версії Sass.
Конфіденційність та обробка даних
Вихідний код SCSS та параметри стилю виводу обробляються в цій вкладці браузера. Convertr не отримує та не зберігає його; закриття або перезавантаження сторінки очищає робочий стан, якщо інструмент явно не пропонує локальне завантаження.

Як використовувати цей інструмент

  1. Надайте вихідний код SCSS плюс параметри стилю виводу в елементах керування інструменту.
  2. Виберіть налаштування, які впливають на складену CSS або діагностику компілятора, а потім запустити інструмент.
  3. Перегляньте скомпільований CSS або діагностику компілятора перед копіюванням або завантаженням.

Поширені режими збою

Невизначені змінні, відсутні міксини, недоступні імпорти або недійсні вкладення повертають помилку компіляції з зазначенням рядка.

Корисний приклад

Скомпілюйте змінну $brand та вкладене правило .button hover у розширений або стиснений CSS.