Приручаем 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."

  1. Спасибо!

    Искал поддержку LESS в стандартных плагинах netbeans 7.2 — ничего подобного не нашлось — очень выручили!

  2. Всем привет. У меня вопрос по быстродействию less. Обрабатывать маленький .less-файл через less.js на ходу, или загружать уже скомпиляный css-файл на сайт? что быстрее? я в тестах не силён, может кто заморачивался? или less нужен исключительно для удобства написания кода и фич> миксинов-переменных…?
    Т.е. на примере бутстрап мы выигрываем в скорости или размере файлов?
    p.s.: в SublimeText2 я открыл package control и написал install package, less. За 10 секунд получил посветку less кода. извиняюсь за многобукв

    • Обрабатывать маленький .less-файл через less.js

      А если JS отключен?
      Для использования LESS я лично вижу два варианта:
      1) компилировать LESS в CSS на сервере, клиенту уже готовый CSS отдавать. На работе у нас именно так и реализовано. Причем LESS компилируется только когда какой-нибудь из исходников .less изменился.
      2) компилировать заранее в CSS, на сервер грузить уже готовый CSS. Этот вариант мне лично нравится меньше, — намного больше мороки, если нужно маленькую фиговинку в коде поменять.

      что быстрее?

      Слишком разные вещи чтобы их сравнивать. Тут будет всё зависеть от того, насколько мощный компьютер у клиента, насколько сложный сам LESS/CSS файл, насколько быстрый интернет.

      p.s.: в SublimeText2 я открыл package control и написал install package, less.

      Вообще есть большой пласт людей, которые привыкли к netbeans и используют его. Например я 😀

  3. MIME-тип «text/x-scss» отсутствует в выпадающем списке(
    версия NetBeans 7.3.1
    в чем может быть проблема?

  4. Спасибо, а то я уже начинал нервничать при переходе на новую строку табить до нужного места

  5. Спасибо!
    Никак не мог понять, почему изменения не отображались)

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

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

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