Bootstrap. Часть 2: LESS

Drupal / 16 ноября 2015
/ 598

Таки я все же решил попробовать LESS. Думаю раз Bootstrap, то пусть будет и LESS. Не буду расписывать все преимущества, их довольно много. Но основная причина – скорость и надо совершенствоваться. Нельзя стоять на месте. В общем, шаг 2.

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

Вводим название и сохраняем. В левой части окна нажимаем выбор и подключаем удаленную папку вашей субтемы по ftp, sftp или где угодно. В правой части – локальный каталог, с которым мы будем работать.
Настраиваем автоматическую синхронизацию. Правой мышью по ярлычку нашего задания LESS – Настройки задания – Авто – включаем при изменении файла анализ и синхронизация. Сохраняем. Клацаем опять правой мышью по ярлычку LESS, выбираем Анализировать и синхронизировать. Это первая синхронизация, все остальные будут проходить автоматически после изменения любого файла в папке. Все, можно ее закрыть и забыть, она будет висеть в трее.

Теперь настраиваем компиляцию less. Для этого я скачал бесплатную программку Winless http://winless.org/. Работать с ней очень просто. В первой части я остановился на варианте 2. (METHOD 1), поэтому у меня в папке моей темы лежит папка bootstrap.

Копируем с заменой файл variables.less из mytheme/bootstrap/less в mytheme/less. Если этого не сделать, Winless будет выдавать постоянные ошибки.

Помечаем для компиляции только два файла: style.less и variables.less. Output file по умолчанию сами предлагают компилироваться в папку css темы. Все, сворачиваем программу.

Теперь при изменении файла less, программа Winless автоматически скомпилирует style.css, а GoodSync сразу это все зальет на сервер. В результате, с небольшой задержкой, в зависимости от скорости интернета, мы будем видеть изменения на сайте.

И еще пару слов про Minify, последняя колонка в окне программы Winless. Если мы эту колонку не трогаем, оставляем птички включенными, то наш css файл будет одной строкой. Удаляются лишние пробелы, абзацы и т.д. Чертовски неудобно править CSS в таком случае и я сдуру птички выключил. Однако, Winless оказался умнее, чем я думал. После того, как я решил изменить стандартные табы, то заметил, что стили у меня дублируются. В принципе не страшно что они дублируются, хуже что в одном из них border: none, а в другом border: 1px. Вот мой класс, которым я переопределил линк таба. В style.less он выглядит так:

.nav-tabs > li > a {
border: none;
padding-right: 7px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
border-radius: 0;
}

точно так же он выглядит и после компиляции в style.css:

.nav-tabs > li > a {
border: none;
padding-right: 7px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
border-radius: 0;
}

но в том же style.css, выше моего, присутствует и такой, который компилируется уже из bootstrap-а:

.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}

В результате такой работы style.css может вырасти до дурных размеров.
Попробуем поставить птички в Minify. Получаем мой стиль в style.css:

.nav-tabs>li>a{
border:none;padding:0 7px 0 0;border-radius:0
}

и тот, что выше:

.nav-tabs>li>a{
margin-right:2px;line-height:1.42857143
}

Все лишнее убрано, ничего не повторяется. Вывод: птички в Minify оставляем.

Можно еще использовать дополнительный компрессор CSS http://refresh-sf.com/ уже для готовых файлов.

Есть еще вариант, можно отказаться от GoodSync и синхронизировать через WebStorm, если вы в нем работаете. Где найти WebStorm учить не буду, найдете сами. Итак, открываем нашу папку с темой в WebStorm

Далее: File – New project from existing files и выбираем Web server is on remote host, files are accessible via FTP/SFTP/FTPS

Указываем папку и имя проекта

И соответственно заполняем данные FTP или SFTP

Если все правильно заполнили, переходим к следующему шагу – выбору папки синхронизации. Я на предыдущем шаге указал сразу папку темы, поэтому просто нажал кнопку Project Root

После этого файлы синхронизируются, вернее скачаются с сервера в вашу папку.

Далее настроим синхронизацию. Переходим Tools – Deployment – Options.

Upload changed files automatically to the default server – выбираем когда загужать. Я выбрал после сохранения. И включил Upload external changes – загружать не только те файлы, над которыми работаем, но и те, которых нет на сервере.

Если над проектом работает несколько человек, то желательно в - Warn when uploading over newer file выбрать Compare content и включить Notify about remote changes.

Теперь компиляция Less. Можно компилировать все тем же Winless, но он запаздывает. После того как я сохраню less файл в WebStorm он загружает его на сервер, но css скомпилированный через Winless еще не видит. Можно переключиться в другое окно, потом обратно чтобы он его увидел и синхронизировал. Поэтому поставим плагин для WebStorm LESS CSS Compiler https://plugins.jetbrains.com/plugin/7059?pr=idea.
Скачиваем, идем в настройки WebStorm: File – Settings – Plugins. Жмем Install plugin from disk. Выбираем наш файл плагина.

Нажимаем Apply, перезагружаем WebStorm.

Далее идем в File – Settings – Other Settings – Less Profile, выбираем папку откуда брать less и куда класть css.

Правда, компилирует этот плагин на мой взгляд намного медленнее, чем Winless и размер css получается больше, поэтому я решил остаться на Winless.

comments powered by HyperComments