18 Листопад 2015
8 706
Рубрика: уроки

Как организовать структуру проекта на Sass

Где размещать файлы проекта на Sass, как называть их, как не запутаться в файловой структуре и не потерять гибкость с ростом проекта. Об этом читайте в очередном номере журнала “Умный верстальщик”.

Одно из важнейших преимуществ 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, иконочный шрифт или плагин для выбора даты. Я взял за правило не редактировать файлы в папке 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 плагинов внутри их файлов стилей и да пребудет с вами сила.

Тепер я хочу бачити коментарі 0