Приручаем LESS. Настраиваем Chrome и Netbeans.

В последнее время у всех веб-прогеров на слуху Twitter Bootstrap. Кто-то уже использует, кто-то только собирается. Лично я считаю, что использовать Bootstrap в не изменённом виде кошерно только для админки. Делать же полноценный сайт, используя легко узнаваемый бутстрап-стиль кнопок и менюшек, как минимум не профессионально.

Кастомизировать Bootstrap очень легко. Только придётся разобраться с LESS.

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

Решили мы поменять кнопочку в бутстрапе. Скачали исходники бутстрапа. Перешли по ссылке из бутстраповой домашней странице на http://lesscss.org/. Где нам сообщают, что использовать LESS сейчас можно либо на клиенте (подключая less.js, который будет собирать less файлы в CSS), либо на сервере, под Node.js или Rhino. Я остановился на первом варианте, про него и буду писать дальше.

Итак, подключаем файлы:

<link rel="stylesheet/less" href="less/bootstrap.less">
<script type="text/javascript" src="./js/less-1.3.1.min.js"></script>

.less файл должен идти перед less.js скриптом

Запускаем локально наш HTML… В Фаерфоксе (16 и 17 версии) вроде бы работает, но через некоторое время виснет, и перестаёт обновлять стили. Хром показывает фигу и в консоли пишет:

XMLHttpRequest cannot load file:///C:/test/less/bootstrap.less. Cross origin requests are only supported for HTTP.

Есть два решения этой проблемы: либо использовать сервер (любой, можно локальный типа Денвера), либо же использовать параметр » -allow-file-access-from-files » для запуска Хрома. Мне второй вариант больше понравился, поэтому я щёлкнул на ярлык Хрома, выбрал свойства, и в поле «объект» дописал после chrome.exe через пробел:

-allow-file-access-from-files

Для less.js есть режим «watch mode», в котором все изменения в less автоматически отслеживаются и применяются к странице. Чтобы его включить нужно доавить ‘#!watch’ к URL в браузере и обновить страницу. Или же можно выполнить less.watch() в консоли. Вот именно этот режим у меня вешал вкладку в Фаерфоксе. В Хроме ( версии 23) всё работало нормально. Причем, субъективно, Хром быстрее грузит страницу при нажатии F5. Могу предположить, что в нём быстрее javascript движок, всё-таки при компиляции bootstrap.less ему нужно обработать около 150 килобайт кода 🙂

С подключением less файлов и настройкой браузеров разобрались. Теперь осталось настроить IDE для подсвечивания синтаксиса в less файлах. Здесь пишу «IDE», а сам подразумеваю Netbeans. Ибо работаю в ней. Чтобы добавить подсветку LESS синтаксиса в Netbeans 7.2 делаем следующее:
1. устанавливаем сторонний плагин — SCSS editor 1.1.1
2. ассоциируем расширение less с этим плагином:
лезем «Сервис» -> «Параметры», закладка «Разное» вкладка «Файлы». Щёлкаем по кнопке «создать», вводим less. Далее из выпадающего списка выбираем less, и сопоставляем ему MIME-тип «text/x-scss». После перезагрузки IDE у нас появилась подсветка синтаксиса.

задаем расширение файлов "less"

задаем расширение файлов «less»

Ассоциируем less файл с SCSS Editor.

Ассоциируем less файл с SCSS Editor.

Для полноценной работы не хватает одного. Скомпилировать LESS файлы в CSS. Я стараюсь как можно меньше иметь дел с серверами, стараюсь всё что можно делать локально. Поэтому для компиляции в CSS использую эту программу: SimpLESS. Так же с недавних пор присматриваюсь к WinLESS. Как не трудно догадаться из названия, это компилятор LESS->CSS для win. Использует тот же самый less.js, компилирует сам при каждом изменении LESS файла. Получается очень удобно.

Маленькая ремарка по-поводу less.js и локального сервера (у меня такое под apache). После редактирования less файлов изменения не появляются при перезагрузке страницы. Дело в том, что less.js складывает скомпилированный .css файл в local storage, и не обновляет его. Помогает очистка этого локального хранилища…

8 комментариев к "Приручаем LESS. Настраиваем Chrome и Netbeans."

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.