Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS
- 18.06.2016
- LESS, Верстка сайтов, Вопрос-ответ, Как сделать?
- Один комментарий
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов и ее раздел Препроцессор LESS. Не так давно была публикация о том, что такое CSS препроцессор LESS, в которой мы поговорили о функционале и возможностях LESS, посмотрели на его плюсы и минусы, а так же разобрались с тем, как LESS расширяет возможности написания CSS кода. Эта запись является инструкцией по установке LESS на Windows 10. Из нее вы узнаете, как установить компилятор LESS на Windows 10, попробуете скомпилировать свой первый LESS файл.
Установка LESS на Windows 10. LESS компиляторы, онлайн компиляция LESS в CSS
Отмечу, что для установки LESS нужна будет платформа Node.js, а компиляция LESS файлов происходит через командную строку, поскольку такой подход удобен не каждому, мы еще рассмотрим графические компиляторы LESS для Windows 10, а так же вы найдете здесь ссылки на сайты, которые позволяют производить компиляцию LESS в CSS онлайн. Помимо этого я постараюсь обозначить проблемы, которые могут у вас возникнуть из-за использования графических компиляторов и онлайн компиляторов LESS.
LESS — препроцессор CSS, Урок 2.1 — WinLess
Установка LESS на Windows 10. Установка платформы Node.js на Windows
Программа WinLess
WinLess — один из самых простых и популярных компиляторов Less под Windows, к тому же совершенно бесплатный для использования. Скачайте программу по этому адресу и запустите её после установки.
Компиляция
Для начала добавьте в программу папку с Less-файлами. Для этого перетащите папку напрямую в окно «Less files» или выберите папку через кнопку «Add folder» (рис. 1).
Рис. 1. Вид программы WinLess
По умолчанию готовые файлы сохраняются в папку с именем CSS. Если такой папки ещё не существует, то она будет создана и в неё добавлены новые стилевые файлы. Код можно сделать компактным, поставив галочку в пункте Minify, при этом все комментарии удаляются, а сам код записывается в одну строку. В итоге работать с конечным документом становится проблематично, зато уменьшается итоговый размер файлов.
Сама компиляция происходит двумя путями.
1. Добавляете папку с Less-файлами, отмечаете галочками те из них, которые следует преобразовать в CSS, указываете, минимизировать их или нет, после чего нажимаете кнопку Compile. При первой компиляции создаётся новая папка CSS и в неё сохраняются готовые файлы. В дальнейшем происходит только обновление их содержимого. Выходную папку при желании можно поменять, щёлкнув правой кнопкой мыши по файлу и выбрав в списке пункт «Select output file» (рис. 2).
Рис. 2. Выбор файла для сохранения
FreeNet заменит Интернет? Когда и будет ли это?
2. После запуска программы компиляция происходит в автоматически фоновом режиме при сохранении Less-файлов. Это полезно при написании нового кода и работе над ним. Какие файлы компилировать и куда их сохранять определяется настройками WinLess. При возникновении ошибок программа выведет сообщение об их наличии.
Настройки программы
Для вывода окна настроек выберите в меню пункт 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-документы и при их изменении в стороннем редакторе компилирует автоматически.
Show message on successful compile — после успешной компиляции появляется успешное сообщение об этом.
Последнее изменение: 13.09.2022
- Комментарии в Less
- Переменные в Less
- Примеси
- Вложения в Less
- Компиляция Less
- Программа WinLess
- Платформа Codepen
- Программа Crunch
Источник: webref.ru
Через что компелировать препроцессор css less: Gulp или Winless и в чем разница?
Здравствуйте, кто в теме, помогите пожалуйста разобраться в вопросе компилятора для препроцессора.
Одни рекомендуют Gulp, другие Winless, но в чем разница?
Казалось бы с Gulp сложнее, ведь нужно дополнительно его настраивать, а в Winless- скачал программку и все готово.
Но если Winless вроде как легче использовать, почему тогда используют Gulp ?
Чем один отличается от другого и в чем преимущества и недостатки каждого из них?
- Вопрос задан более трёх лет назад
- 237 просмотров
2 комментария
Простой 2 комментария
Само название WinLess намекает, что программа работает под виндой.
Если код пишет команда, или код будет поддерживаться разными программистами, то у них могут быть и другие операционные системы.
Галп работает везде. Любой разработчик может открыть клонировать проект, выполнить команду npm install и запустить полностью готовое и настроенное рабочее окружение для данного проекта.
Но главное то, что помимо компиляции стилей, галп может делать еще кучу полезных автоматизированных вещей.
Преимуществ галпа не счесть. Недостатков видимых нет.
У WinLess (и ей подобных) наоборот =)
Источник: qna.habr.com