Как установить less под windows
Обновлено: 03.07.2024
В этой статье я познакомлю вас с Less. Принцип его работы прост. У вас есть файл .less который при каждом сохранении компилируется в .css файл. О возможностях, которые раскрываются перед верстальщиками пойдёт речь в этой статье.
Установить Less на Windows не составляет особого труда. Тут вы найдёте установочный файл Ruby. При установке не забудьте отметить галочками две опции (Add Ruby executables to your PATH и Associate .rb and .rbw files with this Ruby installation).
После установки откройте командную строку и введите следующую команду: gem install less
С установкой всё.
Представьте, что в данный момент у вас ведётся работа над проектом. Вы меняете ваши файлы с расширения .css на расширение .less и в командной строке набираете команду (путь к вашему .less файлу): ВНИМАНИЕ 2 дефиса перед watch
lessc C:\workcedric\xampp\xampp\htdocs\sdmm\css\global.less --watch
Теперь при каждом сохранении .less файла, Less будет компилировать его и обновлять css-файл.
После компиляции этого css кода мы получим
По мне так даже очень! Однако есть и свои минусы. Когда файлы .less будут в несколько сотен строк, возможно будет заниматься около секунды и более на их компиляцию. Всё зависит от ресурсов вашего компьютера.
Я надеюсь вы дадите Less шанс и попробуете этот замечательный плагин в действии. Всего хорошего!
5 последних уроков рубрики "Разное"
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Препроцессоры существенно упрощают написание 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> <!--Для IDE PHP STORM--> <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
WinLess — один из самых простых и популярных компиляторов Less под Windows, к тому же совершенно бесплатный для использования. Скачайте программу по этому адресу и запустите её после установки.
Компиляция
Для начала добавьте в программу папку с Less-файлами. Для этого перетащите папку напрямую в окно «Less files» или выберите папку через кнопку «Add folder» (рис. 1).
Рис. 1. Вид программы WinLess
По умолчанию готовые файлы сохраняются в папку с именем CSS. Если такой папки ещё не существует, то она будет создана и в неё добавлены новые стилевые файлы. Код можно сделать компактным, поставив галочку в пункте Minify, при этом все комментарии удаляются, а сам код записывается в одну строку. В итоге работать с конечным документом становится проблематично, зато уменьшается итоговый размер файлов.
Сама компиляция происходит двумя путями.
1. Добавляете папку с Less-файлами, отмечаете галочками те из них, которые следует преобразовать в CSS, указываете, минимизировать их или нет, после чего нажимаете кнопку Compile. При первой компиляции создаётся новая папка CSS и в неё сохраняются готовые файлы. В дальнейшем происходит только обновление их содержимого. Выходную папку при желании можно поменять, щёлкнув правой кнопкой мыши по файлу и выбрав в списке пункт «Select output file» (рис. 2).
Рис. 2. Выбор файла для сохранения
Настройки программы
Для вывода окна настроек выберите в меню пункт File > Settings (рис. 3).
Рис. 3. Окно настроек WinLess
Start with Windows — запускать программу вместе с Windows. Опцию имеет смысл включить при активной работе с Less-файлами, когда их надо компилировать много и часто.
Start minimized — при запуске программа незаметно висит в трее Windows и тихо делает своё дело.
Use globally installed less — вместо компилятора в WinLess применяется компилятор, установленный через Node.js. Если такого нет, то будет показана ошибка.
Minify by default — по умолчанию все компилированные CSS-файлы оказываются компактными — из них удаляются пробелы, комментарии, табуляция и переносы строк.
Automatically compile files when saved — WinLess отслеживает добавленные в программу Less-документы и при их изменении в стороннем редакторе компилирует автоматически.
И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с 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 ):
Читайте также: