Установка CSS-препроцессора LESS - Блог Фронтендера

CSS-препроцессор LESS: Установка (Урок 2)

Список уроков по данной теме:

Установка less

Так как напрямую браузеры less не понимают, необходимо правильно подключить его в проект.

Сейчас мы посмотрим на основные способы использования

1. Подключение JavaScript библиотеки

Для начала нужно подключить сам скрипт, который будет компилировать less в css

Официальный сайт lesscss.org предлагает нам воспользоваться их CDN для ускорения загрузки

Для этого достаточно вставить код ниже, в head вашего сайта:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>

Проверить актуальность ссылки и версии можно на Официальном сайте lesscss.org

Теперь, когда мы подключили наш «компилятор», нужно подключить файл стилей

Создадим файл style.less и добавим его на нашу страницу следующим кодом:

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

Готово! Теперь head вашего сайта должен выглядеть похожим образом:

<head>
⠀⠀<meta charset="UTF-8">
⠀⠀<title>Уроки для web программистов</title>
⠀⠀<link rel="stylesheet/less" type="text/css" href="styles.less">
⠀⠀<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>
</head>
Плюсы данного способа
  • Быстрое и удобное начало работы
Минусы данного способа
  • Лишние файлы в проекте
  • Код компилируется на стороне клиента, это может привезти к задержке

2. Сервисы для компиляции less в css

В интернете существует много сайтов для онлайн компиляции. Просто пишите свой less код, нажимаете кнопку и на выходе получаете валидный css

Вот список подобных веб сервисов:

Все сервисы абсолютно бесплатны и не требует регистраций. Отличаются в основном только интерфейсом

Плюсы данного способа
  • Никаких лишних инструментов
  • В проекте будет уже готовый css код
Минусы данного способа
  • Лишняя трата времени

3. Программный способ

Существует так же специальная бесплатная программа написанная под windows, называется WinLess

WinLess logo

Официальный сайт — winless.org

Инструкция:

  1. Скачиваем и устанавливаем программу (стандартная установка)
  2. Далее создадим папку style, а в ней создадим файл style.less
  3. Открываем нашу программу WinLess и снизу, в левом окошке нажимаем «Add folder» и добавляем созданную папку Интерфейс WinLess
  4. Готово! Больше ничего нажимать не надо. Теперь, когда вы будете писать в файле style.less у вас будет автоматически создаваться файл style.css с готовым кодом
Плюсы данного способа
  • Встроенная функция сжатия кода
  • В проекте валидный css без лишних библиотек
  • Гибкие настройки
Минусы данного способа
  • Необходимо устанавливать программу и держать её открытой
  • Совместима только с Windows

4. Обработка less в gulp

Самый удобный и профессиональный способ работать с less, это настроить задачу в gulp’e

Данный способ требует определенных знаний и будет рассмотрен в отдельной серии уроков про таск-менеджер gulp

Плюсы данного способа
  • Максимально полная настройка и автоматизация процесса
  • Более профессиональный уровень
Минусы данного способа
  • Требуется время для изучения