Одна з найважливіших переваг Sass — це можливість зберігати стилі в окремих файлах. Зазвичай у вас є один загальний scss-файл, в якому ви за допомогою директиви @import вказуєте, з яких частин потрібно його «збирати». Після змін в кожній із частин проекту загальний файл стилів автоматично оновлюється.

Але якою має бути файлова структура проекту на Sass? Є загальноприйняті правила, де і як зберігати частини проекту. Продумана структура допоможе вам легко орієнтуватися в безлічі файлів. Давайте розберемося, як називати і де розміщувати файли.

Основна структура

Я вважаю за краще зберігати Sass-проект таким чином:

stylesheets/
|
|-- modules/              # стилі всіх розділів
|   |-- _all.scss         # спільний файл імпортів
|   |-- _variables.scss   # змінні проекту
|   |-- _colors.scss      # кольори
|   ...
|
|-- partials/             # Partials (структурні елементи)
|   |-- _base.sass        # імпорти міксінов, змінних
|   |-- _buttons.scss     # кнопки
|   |-- _images.scss      # зображення
|   |-- _grids.scss       # блочна верстка
|   |-- _typography.scss  # тексти
|   |-- _reset.scss       # резет стандартних стилів
|   ...
|
|-- vendor/               # CSS або Sass з библиотек та плагінів
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss             # головний Sass-файл

Головний файл стилів

Такий підхід дозволяє уникати зберігання сміття і тримати головний файл стилів в ідеальній чистоті:

// Модулі та змінні
@import "partials/base";

// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...

// Плагіни
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";

Модулі, partials та плагіни

Як бачите, мій проект розділений на три типи файлів:

Модулі

Папка з модулями містить код Sass, який не буде безпосередньо видно в головному файлі. тут зберігаються

  • міксіни,
  • функції,
  • змінні.

Partials

Папка partials — це основне місце зберігання стилів. Багато розробників любить розділяти проект на header, footer, sidebar та інші компоненти, мені більше подобається групувати їх за категоріями: тексти, кнопки, форми, зображення і так далі. Будь-який з підходів має право на існування.

Така структура проекту називається методикою «SMACSS», про неї я напишу далі.

Сторонні стилі з плагінів

У vendor я зберігаю стилі, що підключаються з бібліотек і плагінів, як Sass, так і CSS. Це зручно, так як ці стилі вже кимось написані і швидше за все ви не будете їх міняти.

Для прикладу можна навести jQuery UI, іконочні шрифти або datepicker. Я взяв за правило, не редагувати файли в папці vendor.

Якщо мені буде потрібно внести в них зміни, я зроблю це в partials. Це, крім іншого, дозволяє легко оновлювати версії бібліотек в майбутньому.

Що таке SMACSS

Цей підхід називають SMACSS. Це модульна архітектура CSS (Scalable and Modular Architecture for CSS), набір правил хорошого тону по роботі з CSS для фронтенд-розробників, яка до того ж легко масштабується.

Суть підходу полягає в поділі проекту на такі категорії:

  • основа — стилі за замовчуванням для базових селектор. наприклад,.clearfix;
  • структура — структура верстки, розміри елементів, їх вирівнювання. Можна привести приклад класу .col-md-6 из Bootstrap;
  • модуль — елементи, з яких будується модуль. Це може бути шапка, сайдбар, стаття, підвал і т.д .;
  • стан — стани елементів. Як повинен виглядати прихований блок, як зміниться стиль при наведенні курсору або при натисканні кнопки, що робити при drag-n-drop зазначеного об’єкта тощо;
  • тема — візуальне уявлення елементів. Власне, це те, як повинні виглядати елементи до будь-яких змін з розділу «стан»;

У цій статті я розглядаю спрощену інтерпретацію SMACSS, яка підходить для більшості проектів. Це не суворі правила роботи, а рекомендації, які допоможуть вам в роботі.

Як користуватися базовим partial

В partials ви могли бачити _base.scss. Він зручний для того, щоб завантажити модулі Sass. Він може виглядати так:

// Використовуйте Compass (тому що він крутий)
@import "compass";

// шрифти
$light: 100;
$regular: 400;
$bold: 600;

// основний шрифт
$base-font-family: sans-serif;
$base-font-weight: $regular;
$base-font-size: 13px;
$base-line-height: 1.4;

// заголовки
$header-font-weight: $bold;

@import "modules/all";

Зверніть увагу на останній рядок, в _base.scss я створюю декілька глобальних змінних і завантажую все Sass-модулі. Як ви пам’ятаєте, модулі не повинні містити нічого, що могло б компілюватися в CSS при імпорті. Зберігання глобальних змінних разом з модулями дає мені доступ до всього оточення Sass, якщо я створюю новий файл стилів. Досить додати _base.scss в нього за допомогою простого @import.

Такий підхід зручний, якщо у вас великий проект і можуть вимагатися окремі файли стилі для різних розділів. Використовуючи базовий partial, ви зможете використовувати тільки ті стилі, які потрібні для певного розділу.

Поділяй і керуй

Якщо ви працюєте над великим проектом, то буде зручно розділити його на частини і зберігати їх в окремих папках. Структура в такому випадку буде виглядати так:

stylesheets/
|
|-- admin/           # стилі для адмінки
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # розділ з акаунтами
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # стилі основного сайту
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # стилі з плагінів
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # головний файл стилів для кожного проекту
|-- account.scss
`-- site.scss

Як бачите, у кожної частини проекту є головний файл стилів, свої модулі, partials і базовий імпорт. Стилі з плагінів краще зберігати в основний директорії. Це вкрай зручно для дуже великих проектів.

Структуру проекту потрібно продумати перед початком роботи. Оцініть його розміри, визначитеся, чи вистачить вам одного загального файлу стилів або будуть потрібні окремі. Не міняйте CSS плагінів всередині їх файлів стилів і нехай буде із вами сила.

Коменти