Как скомпилировать файл less в css

Обновлено: 06.07.2024

Препроцессоры существенно упрощают написание css стилей, позволяют избавить от избыточности и превращают привычный нам css в полноценный язык программирования. В данной статье мы рассмотрим как производится установка препроцессора Less.

Для работы нам потребуется NODE.JS и пакетный менеджер npm

Установка NODE.JS и NPM

Данные команды выводят версию node.js и npm

Способы компиляции LESS

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

Через IDE (например PHP STORM)
Запуск через терминал
Подключение в HTML файле
Специальные программы (Koala)
NODE.JS
Компиляция через GULP

Через IDE PHP STORM

Если вы работаете в IDE PHP STORM, то создайте новый проект, откройте терминал программы и напишите данную команду в нем.

npm install less

Чтобы установить компиляцию Less в PHP STROM необходимо выполнить следующие действия:

Компиляция через Терминал

Данный способ неудобен постоянной подачей команды на компиляцию, что существенно замедляет разработку.

// Данной командой мы устанавливаем пакет less глобально npm i -g less // Команда для компиляции в файл css (перед файлом less необходимо указать путь от корня) lessc ./style.less new_style.css

Компиляция через HTML файл

Неудобство данного способа в подключении избыточного файла less.js.

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <script src="less.js" type="text/javascript"></script>  <script src="node_modules/less/dist/less.js" type="text/javascript"></script> <title>Document</title> </head> <body> </body> </html>

Компиляция через программу Koala

Koala является одним из самых простых и удобных способов компиляции Less файлов. Кроме Less данная программа поддерживает ещё и Sass. Koala реализована под Windows, Mac, Linux и является бесплатной.

Компиляция происходит в режиме реального времени (вам не нужно подавать никакие команды). Не мало важной особенностью данной программы является настройка компрессии.

Компилятор Less Koala

Компиляция через NODE.JS

Создаём файл fileconpile.js:

var less = require('less'); var fs = require('fs'); var lessContent = fs.readFileSync('style.less', ); less.render(lessContent, function(err, output)< if(err) throw new Error(err); fs.writeFileSync('rez_style.css', output.css); >);

Теперь в терминале вызовем наш файл:

Компиляция через GULP

Создаём файл зависимостей packege.json

Установка пакетов less gulp без сохранения на продакшене

npm i --save-dev less gulp

Установка дополнительный пакетов

/* gulp-less - преобразует less в css, gulp-concat - сборка одного css из файлов less, gulp-autoprefixer - добавление автопрефиксов, gilp-sourcemaps - отслеживание позиции изменений less файла gulp-clean-css - минификация css browser-sync - синхронизация */ npm i --save-dev gulp-less gulp-concat gulp-autoprefixer gilp-sourcemaps gulp-clean-css browser-sync

Итак, в предыдущем топике я слегка описал, что такое LESS, а сейчас я расскажу вам как начать использовать LESS вместо CSS.

Первое что мы сделаем, это переименуем наш css файл в less

Далее нам необходимо откомпилировать наш LESS файл и дать браузеру CSS (тоесть сделать почти обратное действие переименованию). И только после этого мы сможем полноценно использовать динамику в наших таблицах стилей. Есть несколько вариантов компиляции:

Специальной программой (компилятором) компилируем LESS в CSS. После этого вставляем готовый файл на сайт.
минус — надо сначала писать — потом компилировать — заливать и проверять на рабочем сайте
Но иногда именно локально и требуется. Я попробовал три приложения, 1,3 и 4 и оставил 4… но это уже на ваш личный выбор.

(для Mac OS) (для Windows) (для Adobe AIR — значит кросплатформенное) (для Adobe AIR — значит кросплатформенное) — есть компрессия выходного CSS

less.js — если в браузере отключены скрипты (а они отключены только у верстальщиков, которые смотрят, как выглядит сайт без скриптов, остальные 99,999% людей не отключают их) — то, к сожалению, браузер не получит скомпилированный файл, этот способ советуют сами разработчики LESS, принцип работы простой, в секции <head> подключаем наш LESS файл и после него подключаем скрипт для компиляции. Скрипт тут, качаем последнюю версию.

Первая строчка — подключает наш файл, который компилирует наш LESS в CSS, вторая строчка подключает скомпилированный CSS в шаблон.

Сами файлы должны быть созданы нами, нашими руками. Вот пример файла lessphpcomp

Этот файлик делает следующее (построчно):

с помощью less.inc.php (который мы скачали с официального и залили в корень шаблона) компилирует… далее стр.3
создаем переменную докрут
… компилирует наш LESS
в CSS файл

Который мы и подключили в шаблоне (сам этот файлик styles.css нам необходимо создать вручную и дать права 755).

Теперь изменяем наш LESS файл — открываем сайт и видим изменения, прям как работать с обычным CSS файлом.

Прошу обратить внимание, что нам сама компиляция нужна только во время разработки, в остальное время строчку подключения нашего файлика-компилятора надо закомментировать, чтобы не создавать лишнюю нагрузку на хостинг.

Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS

Отмечу, что для установки LESS нужна будет платформа Node.js, а компиляция LESS файлов происходит через командную строку, поскольку такой подход удобен не каждому, мы еще рассмотрим графические компиляторы LESS для Windows 10, а так же вы найдете здесь ссылки на сайты, которые позволяют производить компиляцию LESS в CSS онлайн. Помимо этого я постараюсь обозначить проблемы, которые могут у вас возникнуть из-за использования графических компиляторов и онлайн компиляторов LESS.

Установка LESS на Windows 10. Установка платформы Node.js на Windows

Мы уже упоминали о том, что CSS препроцессор LESS является кроссплатформенным. Кроссплатформенность LESS достигается за счет того, что для компилятор LESS использует платформу Node.js, которая работает на любой операционной системе. Поэтому, чтобы установить LESS компилятор на Windows (как и на любую другую ОС) необходимо сперва установить платформу Node.js, на которой будет работать LESS компилятор. Для вас я составил подробную инструкцию по шагам о том, как установить Node.js на Windows и затем установить LESS компилятор, приступим.

Скачиваем Node.js, чтобы установить компилятор LESS на Windows

Если вы используете Windows, то, нажав на большую зеленую кнопку скачаете инсталлер Node.js. Запустите инсталлер и следуйте указаниям программы. Путь, по которому я буду устанавливать Node.js: C:\Program Files\nodejs\. У нас сейчас не стоит цели разобраться с тем, как устроена Node.js, поэтому я не буду подробно описывать ее компоненты.

На третьем шаге нам нужно воспользоваться NPM для установки LESS. NPM – это менеджер пакетов Node.js, который позволяет добавлять различные компоненты. Команда npm install -g less установит LESS на ваш компьютер. Обратите внимание на то, что данную команду нужно выполнять не в терминале Node.js, а в командной строке Windows, иначе получите ошибку: npm should be run outside…

Мы установили LESS на Windows, теперь давайте попробуем скомпилировать LESS код в код CSS. Напомню, что параллельно мы рассматриваем CSS препроцессор SASS и SCSS и там мы уже рассмотрели процесс установки компилятора SASS на Windows, пример я возьму оттуда. Вообще вы этих рубриках я буду стараться использовать одинаковые примеры, чтобы вы видели разницу между SASS и LESS. Для того чтобы скомпилировать LESS в CSS возьмите любой редактор кода (это может быть даже простой блокнот) и напишите в нем следующий код:

Я сохраню свой файл так: style.less. На самом деле код этого файла ничем не отличается от CSS, но это сделано специально, чтобы не отвлекаться на объяснение особенностей LESS в то время, как мы говорим о компиляции. Сохраните файл style.css в папку nodejs, чтобы компилятор «видел» этот файл.

После этого запустите командную строку Windows с правами администратора и выполните две команды:

Первая команда позволяет перейти в папку nodejs, второй командой вы указываете компилятору файлы с кодом LESS и говорите о том с каким именем вы хотите получить файл. Скомпилированный CSS файл вы найдете в папке nodejs. В отличии от компилятора SASS, компилятор LESS не будет автоматически компилировать ваш LESS код в CSS.

Онлайн компиляция LESS в CSS. Минусы и плюсы онлайн компиляции LESS

А еще онлайн компиляторы избавят вас от работы с командной строкой, для некоторых это критично, для некоторых нет. Но, на самом деле, не всегда удобно использовать командную строку, кто бы там чего не говорил.

Данный онлайн компилятор LESS представляет собой два окна: в левое окно вы вводите код LESS, в правом окне вы видите CSS код, который был сгенерирован после анализа LESS кода, очень удобно и наглядно.

Но у онлайн компиляторов LESS есть минусы. Первый заключается в том, что их не очень удобно использовать в работающих проектах, так как вам всегда придется копировать CSS код и затем загружать его на сайт.

Второй минус онлайн компиляции LESS заключается в том, что у вас нет полного понимания того, какая версия LESS реализована в этом онлайн компиляторе, из-за этого могут быть ошибки и непредсказуемый код.

Третий минус онлайн компиляции в том, что без доступа к интернету вы им не воспользуетесь.

Компиляторы LESS для Windows

Но мы можем избавиться от минуса, заключающегося в том, что не всегда есть доступ в интернет. Установив компилятор LESS с графическим интерфейсом на Windows. Давайте посмотрим на преимущества графических компиляторов LESS в Windows:

Вам не нужно использовать командную строку.
Установленный десктопный компилятор не требует доступа в интернет.
Десктопный компилятор в Windows удобен для начинающих разработчиков, так как они видят, как происходит компиляция LESS в CSS.

Но, как и всегда, у графических компиляторов в Windows есть и минусы:

Эти компиляторы пишутся сторонними разработчиками и представляют иногда для нас черный ящик: мы можем не иметь информации о том, как работает этот компилятор, и не знать версию LESS, которую они поддерживают.
Оффлайн компиляторы занимают место на вашем компьютере.
Оффлайн компилятор вы не сможете использовать онлайн на своем сайте и файлы придется копировать руками.

Компиляторов для LESS в Windows много, но я приведу лишь два примера. Первый компилятор LESS в CSS для Windows универсальный: Koala, он позволяет компилировать не только LESS, но и SASS код. Второй Windows компилятор LESS называется Winless. Оба этих компилятора рекомендуют использовать сами разработчики LESS. Обзор обоих компиляторов Windows скоро будет на моем сайте.

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?

Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS, придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS.

Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?

Создаем файл стилей c расширением .less
После сохранения, автоматически сгенерируется .css файл в ту же папку.

Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS, им нужен CSS код.

Переменные LESS

Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"

Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS. Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.

Теперь пишем обычный код, как мы это делали в CSS, но вместо значений подставляем переменные.

LESS

div <
padding: 0;
font-family: Roboto, sans-serif;
color: @black;
>

После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.

CSS

Миксины (mixin) в LESS

Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.

На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.

.button_font font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
>

Примешиваем миксин в свойства селектора кнопки.

На выходе получаем:

Символ амперсанд

Вместо дублирования названия селектора, используем символ амперсанд.

CSS

Медиа-запросы в LESS

Можно записывать медиа-запросы прямо внутри селектора.

LESS

CSS

Заключение

Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Читайте также: