Chez's Notes

Not only... nasty things

Сборка LESS/SCSS(SASS) стилей или js скриптов в один файл

Рубрика: Разработка

SASS LESSКак я писал ранее, работая в M18 познакомился довольно интересным способом сборки стилей и скриптов.

На первый взгляд он может показаться громоздким и неудобным, но когда привыкаешь - начинаешь чувствовать удобство. Кратко суть способа можно изложить в одном предложении: "less/sass без инклудов, но с толикой БЭМ", и сейчас я поясню, что имеется ввиду.

В классическом рабочем проекте мы имеем в публичном каталоге сайта папки такого плана:

Папки с ресурсами

Содержимое папок ресурсов, начинающиеся с $

Здесь директория, имя которой начинается с $ содержит всю вложенную структуру стилей или скриптов, в процессе сборки файлов в каталоге, получается выхлоп в виде файла с таким же названием, что и директория, но без начального "$".

Внутри этих папок действует правило системной сортировки (классической сортировки в известных операционных системах), где начальные символы используются для определения позиции, затем просмотр идет в глубь на символ, и т. д.

Слева пример как это выглядит в реальном проекте (условно).

 

Что здесь можно наблюдать?

 

Во-первых четко вырисовывается структура документа либо блоков (ака псевдо-БЭМ). Директории содержат в себе файлы и директории (их можно перемещать, копировать между ветвями, по сути перемещая стилевые группы в css дереве).

Каждая директория может содержать файл _wrapper.less (_wrapper.sass, _wrapper.js), который по сути определяет в какую обертку будет завернут сей набор правил и селекторов.

_wrapper.less

less scope

Здесь "/*@@@*/" - метка, поясняющая, что вместо нее нужно записать все то, что лежит в данной директории рекурсивно в порядке очереди.

Внутри файлов в директории, например в самом первом 010_.less мы задаем less scope через & и дальше описываем всю препроцессорную структуру. В работе я предпочитаю прямое наследование ">" поэтому в моих проектах можно встретить в основном именно их.

В чем прелесть?

 

  1. Можно перемещать/копировать папки как блок-элементы в БЭМ
  2. Никаких include на клиенте, также не происходит компиляция css в браузере
  3. Вся многовложенная структура формируется в один сжатый css файл, все префиксные правила выставляет компилятор, media queries разворачивает он же.

Данный подход к структурированию css и последующей обработке придумал не я, а Волынкин Андрей. Мне же в связи с удобством данного метода потребовалось решение, не завязанное на серверы рабочие. Хотелось не менять парадигму каждый раз, когда делаю проект не связанный с М18.

Это желание вылилось в php проект, который можно увидеть на github. В ридми есть краткая инструкция на ломанном английском о том, как можно его прикрутить к PHPStorm в качестве file watcher или по нажатию горячей клавиши. Запускается он и под Windows в том числе, но нужно наличие в переменной Path путей ведущих к php executable.

 

Предлагаю посетить мой проект на гитхабе и внести парочку разгромных пулл-реквестов.

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

 

Приятной верстки!