Препроцессор Less

Препроцессор less существенно упрощают и оптимизируют верстку сайтов и превращают таблицу стилей в полноценный язык программирования.

Есть несколько вариантов работы с препроцессром less:

• Компиляция css файла на стороне сервера

• Компиляция css файла на стороне клиента В данном случае недостаток очевиден, компиляция требует времени и эта задержка скажется на скорости открытия страницы

• Компиляция css файла на стороне клиента причем на production server (рабочий сервер) мы публикуем только скомпилированный файл css. Это позволяет нам вести разработку на локальной машине используя все возможности данного препроцессора, а сам сайт не будет выполнять дополнительную работу по компиляции нашего css файла.

В данной статье мы рассмотрим именно третий вариант

Установка less

1. Установка less.js Так как препроцессор less онован на JavaScript, то сначала мы должны скачать и подключить данный файл (Можно использовать less.min.js если Вы уверены, что Вам не придётся вносить в него правки). Данный файл можно скачать с официального сайта.

2. Подключаем файл less.js Для этого необходимо прописать в вашем html документе следующую строку:

   1	<script src="less.js" type="text/javascript"></script>

   <script src="less.js" type="text/javascript"></script>

3. Создать файл style.less

4. Подключаем файл style.less

   1	<link rel="stylesheet/less" type="text/css" href="style.less" />

   <link rel="stylesheet/less" type="text/css" href="style.less" />

5. Устанавливаем node.js Скачиваем с официального сайта.

6. Устанавливаем пакет less В командной строке пишем следующий код:

   1	$ npm install -g less

   $ npm install -g less

   Синтаксис данной команды:

   npm — пакетный менеджер;
   i — сокращение от install, то есть «установить»;
   -g — флаг, который указывает на то, что пакет будет установлен глобально;
   less — имя устанавливаемого пакета;

7. Компилирование файла style.less

   — Без сохранения результата в файле style.css

   1	$ lessc style.less

   $ lessc style.less

   — C сохранением результата в файле style.css

   1	$ lessc style.less > style.css

   $ lessc style.less > style.css

   Для автоматической перекомпиляции less файлов в css можно установить программу koala, по ссылке на официальный сайт.