# Форматувальник 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 у форматувальнику коду.

Ваша реклама тут?

[Напишіть нам електронною поштою](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набір плагінів для роботи з агентами для WordPress.](https://sleekwp.com/?ref=oneclickpro)