Инсталиране на LESS на Windows 10

Инсталиране на LESS на Windows 10. LESS компилатори, онлайн компилиране на LESS в CSS

Здравей, посетител на ZametkiNaPolyah.ru! С тази публикация отварям нов раздел: Оформление на уебсайта и неговия раздел LESS preprocessor. Не толкова отдавна имаше публикация за това какво представлява LESS CSS препроцесорът, в който говорихме за функционалността и възможностите на 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 на Windows 10 Инсталиране на рамката Node.js на Windows

Вече споменахме, че LESS CSS препроцесорът е междуплатформен. Междуплатформен LESS се постига благодарение на факта, чеза LESS компилаторът използва платформата Node.js, която работи на всяка операционна система. Следователно, за даинсталирате компилатора LESS на Windows (както и на всяка друга операционна система), първо трябва да инсталирате платформата Node.js, на която ще работиLESS компилатор. За вас съм съставил подробни инструкции стъпка по стъпка как да инсталирате Node.js на Windows и след това да инсталирате компилатора LESS, нека да започнем.

Първата стъпка, която трябва да направите, за да инсталирате LESS, е да изтеглите Node.js. Можете да изтеглите Node.js от официалния сайт: https://nodejs.org/en/.

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 трябва да се изпълнява извън...

След като инсталацията на LESS приключи, ще получите съобщение, подобно на следното, в зависимост от инсталираната версия на LESS:

Ще запазя файла си така: style.less. Всъщност кодът в този файл не се различава от CSS, но това е направено нарочно, за да не се разсейваме с обяснение на функциите на LESS, докато говорим за компилация. Запазете файла style.css в папката nodejs, така че компилаторът да "види" този файл.

След това стартирайте командния ред на Windows с администраторски права и изпълнете две команди:

Първата команда ви позволява да отидете до папката nodejs, с втората команда насочвате компилатора към файлове с ПО-МАЛКО код и говорите заобем с какво име искате да получите файла. Ще намерите компилирания CSS файл в папката nodejs. За разлика от компилатора SASS, компилаторътLESS няма да компилира автоматично вашия LESS код в CSS.

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

Както при SASS и SCSS, има онлайн компилатори за LESS, които "превръщат" LESS кода в CSS без никакви проблеми.Онлайн компилирането на LESS е удобно за начинаещи, тъй като те могат веднага да видят как LESS се преобразува в CSS, предимството на онлайн компилаторите е, че могат да се използват на всеки компютър, където има интернет, и не изискват инсталация. Като пример за онлайн LESS компилатор: http://winless.org/online-less-compiler.

И онлайн компилаторите ще ви спестят от работа с командния ред, за някои е критично, за някои не. Но всъщност не винаги е удобно да използвате командния ред, без значение кой какво казва.

Тозионлайн LESS компилатор се състои от два прозореца: в левия прозорец въвеждате LESS кода, в десния прозорец виждате CSS кода, който е генериран след анализиране на LESS кода, много удобно и визуално.

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

Вторият недостатък на онлайн LESS компилацията е, че нямате пълно разбиране коя версия на LESS е внедрена в този онлайн компилатор, което може да доведе до грешки и непредвидим код.

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

LESS компилатори за Windows

Но можем да се отървемот минуса, който е, че не винаги има достъп до интернет.Чрез инсталиране на LESS GUI компилатор на Windows. Нека да разгледаме предимствата напо-малко графични компилатори в Windows :

  1. Не е необходимо да използвате командния ред.
  2. Инсталираният десктоп компилатор не изисква достъп до Интернет.
  3. Десктоп компилаторът на Windows е удобен за начинаещи разработчици, тъй като те могат да видят как LESS се компилира в CSS.

Но, както винаги, графичните компилатори в Windows имат своите недостатъци:

  1. Тези компилатори са написани от трети страни и понякога представляват черна кутия за нас: може да нямаме информация за това как работи този компилатор и може да не знаем версията на LESS, която поддържат.
  2. Офлайн компилаторите заемат място на вашия компютър.
  3. Няма да можете да използвате офлайн компилатора онлайн на вашия сайт и ще трябва да копирате файловете ръчно.

Има много компилатори за LESS в Windows, но ще дам само два примера. Първият LESS към CSS компилатор за Windows е универсален: Koala, той ви позволява да компилирате не само LESS, но и SASS код. Вторият компилатор на Windows LESS се нарича Winless. И двата компилатора се препоръчват от самите разработчици на LESS. Преглед на двата компилатора на Windows скоро ще има на моя сайт.