Вход

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

Препроцессор 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>
  3. Создать файл style.less

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

    1
    
    <link rel="stylesheet/less" type="text/css" href="style.less" />
  5. Устанавливаем node.js Скачиваем с официального сайта.

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

    1
    
    $ npm install -g less

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

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

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

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

    1
    
    $ lessc style.less

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

    1
    
    $ lessc style.less > style.css

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

6 июля 2017 /

880 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

Please Login to comment
  Получать уведомления о новых комментариях  
Уведомлять