LESS→CSS

Intro. Что такое LESS?

The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js and Rhino.

Больше про сам LESS писать ничего не буду (на официальном сайте, на Хабре и других сайтах написано не мало).

Куда более интересно провести анализ инструментов для работы с LESS. Нам нужны компиляторы и редакторы.

Посмотрим на редакторы.

Первое, что приходит на ум — Notepad++. В версии «из коробки» LESS не поддерживается. Идем на страницу пользовательских языков и смотрим. Mark Davies уже реализовал то, что нам надо. Качаем, устанавливаем и получаем небольшой профит (см. скрин ниже).

Для тех, кто не может ничего сделать без Visual Studio тоже есть решение. Идем на http://visualstudiogallery.msdn.microsoft.com и в поиске вводим LESS. Находится много всего, но нужных вещей три — CSS Is Less, LessExtension и Mindscape Web Workbench. Первый из этих трех вообще слабенький, а второй и третий довольно хорошие продукты. Но вот беда — работают только под ASPX-проекты (с VS.PHP никто не захотел работать). Да, Pro версия Mindscape Web Workbench позволяет компилировать LESS, минимизировать полученный CSS и делает еще несколько полезных вещей.

Теперь отойдем от надстроек для существующего ПО. Возьмем программу, которая предназначена именно для работы с LESS. Crunch. На первый взгляд (мое мнение) вызывает недоумение. Наверно, текстурный фон виноват 🙂 Но стоит посмотреть на нее (программу) поближе. Имеет удобный интерфейс — минимум кнопок, большое поле ввода, позволяет работать с несколькими документами одновременно. В разделе Help есть подробное описание горячих клавиш (один раз попробуешь и уже не забудешь). Да, Crunch имеет встроенный компилятор (Ctrl+Enter). Так что css-файлы генерируются почти на лету (в начало css-файла добавляется комментарий, что этот файл создан при помощи Crunch). Если Вы допустили ошибку в коде, то компилятор укажет Вам на нее (номер строки, описание ошибки — все как у людей). Получается, что Crunch находится между редакторами и компиляторами, так как совмещает в себе функционал обоих.

Посмотрим теперь на «чистые» компиляторы (без редактирования).
Simpless (на момент публикации заметки оф. сайт лежит, посему ссылка в Гугл).

Использование — перетащить LESS-файлы в окно программы и нажимать на кнопку с вращающимися стрелками (не самый очевидный момент). В случае ошибок в файлах, компилятор укажет на них. Программа умеет сворачиваться в трей. Сама по себе интересна только как «для коллекции и расширения кругозора».
Последней в обзоре идет программа WinLESS. Умеет загружать в себя сразу папку с LESS-файлами (поштучно почему-то не хочет) и комплировать их в фоновом режиме (то есть, редактируем мы less-файл в блокноте, нажимаем сохранить, а WinLESS на фоне компилирует его). На счет фоновой компиляции стоит сказать отдельно. Она опциональна — это раз. Она реально удобна — это два. Почему удобна? У WinLESS есть иконка в трейе. И при возникновении ошибок компиляции появляются красивые тултипы с подробными описаниями:

Так же в программе ведется логирование совершенных действий:

P.S. Мой рейтинг ПО для LESS выглядит так:

  1. Crunch
  2. Notepad++ + WinLESS
  3. Все остальное

, , , , , ,

2 комментария
  1. Wave сказал(а):

    Crunch — на самом деле фигня, а не редактор. Кроме подсветки синтаксиса ничего нет. Ни автодополнений, ни списков свойств, ни нормальной навигации (по скобкам хотя бы) ничего. Лучше уж WinLESS + ваш любимый редактор (у меня это FAR manager).

  2. KronuS сказал(а):

    Когда открыл для себя Sublime, то на первое место попал именно он вместе с WinLess.

Оставить комментарий

Top ↑ | Main page | Back