Форматувальник SCSS
Форматуйте таблиці стилів Sass SCSS за допомогою цього форматувальника SCSS. Вставте SCSS, і інструмент упорядкує вкладені правила, змінні, міксини, підключення, батьківські селектори та керівні директиви: відступ у два пробіли, одне оголошення на рядок, пробіл після двокрапок у властивостях і крапки з комою там, де їх бракує. Інтерполяції та коментарі зберігаються, тож розробники інтерфейсу можуть упорядкувати часткові файли й фрагменти коду без компіляції.
Поширені запитання
Як працює форматувальник SCSS?
Він читає таблицю стилів як послідовність токенів, зокрема фігурних дужок, крапок з комою, двокрапок, рядків і коментарів, а потім відтворює структуру на їх основі. Кожна відкривна дужка починає блок із відступом, а кожне оголошення завершується на окремому рядку.
Чи підтримуються вкладені правила?
Так, вкладені правила й батьківські селектори, як-от &:hover, отримують відступ на один рівень глибше за батьківський елемент — по два пробіли на рівень. Двокрапки в селекторах залишаються на місці, тож &:hover не розбивається.
Як форматуються змінні, міксини та підключення?
Після двокрапки в оголошеннях змінних, як-от $color: #333;, ставиться пробіл, а @mixin і @include зберігають аргументи з пробілом після кожної коми. Перед дужкою в керівних директивах, як-от @if, @each і @for, ставиться пробіл.
Чи зберігаються інтерполяції?
Так, інтерполяції, як-от #{$name}, копіюються точно в тому вигляді, у якому їх написано. Це стосується інтерполяцій у селекторах, як-от .icon-#{$name}, і в назвах властивостей.
Чи компілює інструмент мій SCSS або перевіряє його?
Ні, він не компілює код у CSS і не перевіряє синтаксис, тому форматує також незавершені фрагменти. Скористайтеся компілятором Sass, щоб знайти помилки та отримати CSS.
Чи зберігаються коментарі?
Так. Рядкові коментарі, що починаються з //, завершують свій рядок, а блокові коментарі зберігаються на своїх місцях.
Чи працює це з відступним синтаксисом Sass?
Ні, цей інструмент призначено для SCSS, де використовуються фігурні дужки та крапки з комою. У файлах із відступним синтаксисом .sass немає дужок, від яких можна відраховувати відступи, тож спершу перетворіть їх на SCSS.
Чи можна змінити відступи?
Ні, результат завжди використовує два пробіли, а форматувальник не має налаштувань. Тому одна й та сама таблиця стилів завжди дає однаковий результат.
Чому результат обрамлено як scss?
Результат повертається як блок коду Markdown із позначкою scss, тому відображається з підсвічуванням синтаксису. Скопіюйте рядки між роздільниками у свій файл .scss.
Якого максимального розміру може бути моя таблиця стилів?
До 5 MB за один запуск; більший вхідний файл відхиляється з повідомленням. Результат ідентичний опції SCSS у форматувальнику коду.