- CSS-препроцессор LESS: Введение (Урок 1)
- CSS-препроцессор LESS: Установка (Урок 2) — текущий
- CSS-препроцессор LESS: Переменные (Урок 3)
- CSS-препроцессор LESS: Миксины (Урок 4)
Установка 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.org
Инструкция:
- Скачиваем и устанавливаем программу (стандартная установка)
- Далее создадим папку style, а в ней создадим файл style.less
- Открываем нашу программу WinLess и снизу, в левом окошке нажимаем «Add folder» и добавляем созданную папку
- Готово! Больше ничего нажимать не надо. Теперь, когда вы будете писать в файле style.less у вас будет автоматически создаваться файл style.css с готовым кодом
Плюсы данного способа
- Встроенная функция сжатия кода
- В проекте валидный css без лишних библиотек
- Гибкие настройки
Минусы данного способа
- Необходимо устанавливать программу и держать её открытой
- Совместима только с Windows
4. Обработка less в gulp
Самый удобный и профессиональный способ работать с less, это настроить задачу в gulp’e
Данный способ требует определенных знаний и будет рассмотрен в отдельной серии уроков про таск-менеджер gulp
Плюсы данного способа
- Максимально полная настройка и автоматизация процесса
- Более профессиональный уровень
Минусы данного способа
- Требуется время для изучения
