Організація Файлів Sass для Масштабованих Проєктів

Іноді складно писати весь код в одному файлі. Sass дозволяє розділяти код на різні файли та папки. Це спрощує підтримку та рефакторинг коду.

sass folder

Першим кроком є створення папки sass у корені проєкту. Таким чином компілятор розуміє, що у проєкті використовується sass.

організація папки sass

У папці sass:

1. Створюємо файл main.scss. Це головний файл для компілятора. Усі фрагменти підключаємо до цього файлу за допомогою директиви @import;
2. Створюємо окремі папки для sass-фрагментів (partials). Наприклад, папка utilities для змінних, папка components для повторюваних стилів окремих елементів, папка base для глобальних стилів і скидання стандартної поведінки елементів, а також папка layouts для стилів, що не повторюються.

фрагменти (partials)

Тепер можна додавати файли та писати sass-код для стилізації елементів. Для збереження структури створюємо окремий файл для кожної функціональності. Назва файлу повинна починатися з підкреслення (_). Для компілятора це означає, що файл не є основним, а є фрагментом (partial).

Вся структура готова. Можна імпортувати всі файли у файл main.scss за допомогою директиви @import. Порядок імпорту має значення. Наприклад, якщо потрібно використати змінні з файлу _variables.scss у файлі _button.scss, тоді імпорт файлу _variables.scss повинен бути вище за імпорт файлу _button.scss у файлі main.scss.

Синтаксис імпорту файлу наступний. Використовується @import і подвійні лапки ("") для вказання правильного шляху до файлу.

@import "path";

Вміст файлу main.scss виглядає так:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Примітка

Ми розглянули основи препроцесора sass, які дозволяють використовувати його у проєктах. Однак будь-який препроцесор має велику кількість різних можливостей. Охоплення всіх з них виходить за межі цього курсу.