Abr@X@bra.ru
Как подключить SASS к сайту на Битрикс
Как подключить SASS к сайту на Битрикс

Как подключить SASS к сайту на Битрикс

11.07.2016
854

Столкнулся с такой задачей, как сделать свою работу более комфортной, при разработке проекта на CMS Битрикс. И прикрутить SASS к верстке под Битрикс. Все таки новые тренды как SASS и LESS делают свое дело. Да и что там душой кривить, работать с ними более удобней и комфортней, а я очень сильно люблю комфорт и не смог пройти мимо. 

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

Так как я верстал в SASS и давольно сильно к нему привык, откатываться назад на чистый CSS понятное дело нет смысла. 

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

Представим, что у нас есть установленная чистая система CMS Битрикс. Которую мы установили на наш хостинг или сервер. Так же у вас локально на вашей ОС уже должен стоять Node.js. Думаю проблем с его установкой возникнуть ни у кого не должно, все довольно просто, качаем и устанавливаем.  

Продолжаем, открываем шаблон, перед нами будет следующая структура файлов.


На файл под названием .DS_Store не обращаем внимание и если он у вас есть, можете его просто удалить. В общем, есть папка local, в которой у нас лежит все что нам нужно для дальнейшей работы. Саму папку нам нужно закачать к нам на сервер в корень нашего проекта на Битрикс. Так же я в своей работе использую IDEA PhpStorm, чего и вам советую. Освоив данную IDEA вы сэкономите кучу своего времени в создании сайтов. У нас должна получится следующая иерархия файлов, есть папка проекта local которая лежит локально и такая же папка local на нашем сервере в корне.

Это сервер.


Это папка локальная.


Как вы могли заметить, файлы .bowerrc, gulpfile.js, package.json находятся только локально, на сервер я их не закачивал.

Теперь нам нужно через терминал на локальной стороне установить npm, ставится он давольно просто. Открываем в терминале нашу папку local и устанавливаем npm, прописав вот такую строчку npm i 

должен пойти процесс загрузки пакетов. После полной установки у нас должна появиться еще одна папка, которую загрузил npm.


Нам остается запустить собственно сам gulp. Открываем опять терминал переходим в папку проекта и пишем gulp

после чего у нас должен запуститься браузер с нашим проектом. И так самое сложное позади. Все стили и SASS файлы лежат в папке APP


Теперь можно переходить в папку SASS открываем к примеру main.sass и можем работать. После сохранения файла, он автоматом компилит все в папку CSS в main.css где мы наблюдаем обычный код CSS и он автоматом заливается на сервер. В header.php у же подключен main.css, js шрифты и тд. В общем тут конечно пусть настраивает каждый сам под себя.

Все настройки по данному шаблону лежат в gulpfile.js. 

По началу может показаться очень заморочено, но это только кажется, все настраивается довольно быстро и один раз. У кого будут вопросы, задавайте их в комментариях. 




PHP, Bitrix, Sass
Читайте также:
Web-разработчик и новый клиент. Выстраиваем правильное общение.

Web-разработчик и новый клиент. Выстраиваем правильное общение.

В данном посте, хочу поделиться как я нашел золотую середину по общению с новыми клиентами, которые обращаются ко мне,...

Читать
React.js на русском языке. Часть первая

React.js на русском языке. Часть первая

Опубликовал свой первый пост, на habrahabr.ru по React.js
Мне очень нравиться концепция и подход React.js, что...
Читать
Битрикс D7, инфоблоки - ORM

Битрикс D7, инфоблоки - ORM

Модуль ORM для инфоблоков.

Все знаю что у битркс появилась какая-никакая, но все-таки ORM.

И они даже модуль...

Читать