Sass Boilerplate

блабла

Струтура

/sass/lib/base - Все миксины и библиотеки необходимые для работы

/sass/screen.sass - обработчик .sass файлов.

/sass/common.sass - Содрержит стили для: шрифтов, переменных, общих блоков, заголовков, хедера, футера.

/sass/main.sass - Стили для внутренних страниц.

Нейминг блоков

Мы используем БЭМ-методологию .block для независимых блоков и .block__element для элементов внутри этого блока.

Если уронь вложености элементов внутри блока равен двум .block__elementelement.

И .block_modification для модификаторов блока.

layouts.sass содержит все лейауты проекта. .l-* Префикс. Например: l-sidebar, l-page.

Состояния блока .is-*. Пример: .is-running, .is-hidden, .is-open.

Для взаимодействия с js используем префикс .js-*.

Sass codestyle

1. каждый новый блок (не элемент, а блок) имеет такую форму комментариев пример.

2. все элементы блока, должны иметь как минимум одну вложеность (но не боле 3-х) в своего родителяпример.

3. Структура. По умолчанию структура sass такая:

   3.1) common.sass: шрифты, переменные, миксины (под текущий проект), экстенды. Общие блоки (body, out, wrap etc), заголовки, разное, навигация, хедер, футер,

   3.2) main.sass: блоки внутренних страниц

Если проект средний или большой - отдельные элементы, группы элементов, большие блоки могут выносить в отдельный файл.

Например кнопки в файл - btn.sass, элементы форм - form.sass, иконки - icons.sass итд