Существует несколько способов, как из Less-документа получить на выходе CSS-файл, уже понимаемый всеми браузерами:
- запуск в браузере;
- компиляция через Node.js;
- использование сторонних программ.
Самым простым вариантом является компиляция непосредственно в браузере, это основная фишка Less, которая отличает его от других препроцессоров CSS.
Подключение Less
Скачайте Less с официального сайта по этой ссылке:
http://lesscss.org/#download-options
Или с сайта GitHub:
https://github.com/less/less.js/archive/master.zip
Затем подключите less.js или сжатый less.min.js на свою страницу через <script>.
<script src="less.js"></script>
Также можно использовать CDN (Content Delivery Network, сеть доставки контента), тогда не придётся самостоятельно скачивать файл. Подключение в этом случае происходит следующим образом.
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
Теперь добавляем свой файл в формате Less на веб-страницу через элемент <link>. Обратите внимание на значение атрибута rel, оно отличается от традиционного. Кроме того, важна последовательность строк — вначале стиль, потом скрипт, это принципиально.
<link rel="stylesheet/less" href="styles.less">
<script src="less.js"></script>
Компиляция непосредственно в браузере занимает порой продолжительное время, поэтому рекомендуется только в отладочных целях. На готовом сайте для ускорения производительности применяйте уже скомпилированный CSS или выполняйте компиляцию на стороне сервера.
При редактировании кода окно браузера для просмотра изменений потребуется обновить вручную. Чтобы Less сам следил за изменениями есть два способа.
Метод watch
Добавьте параметр env со значением development, а затем вызовите метод less.watch() как показано ниже.
<script>less = { env: 'development' };</script>
<script src="less.js"></script>
<script>less.watch()</script>
Применение #!watch
В адресной строке браузера в конец URL добавьте #!watch. К примеру, адрес документа index.html, тогда вызывайте его как index.html#!watch
Учтите, что компиляция с помощью Less.js происходит только под управлением веб-сервера и не работает для локальных файлов.