Приручаем 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. Спасибо!
    Никак не мог понять, почему изменения не отображались)

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

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

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