×
Creating solutions

Používame pre-processor Less vo vývojovom prostredí Eclipse

Pri práci s CSS sa skôr či neskôr uvažuje o spôsobe, akým zefektívniť vývoj webu aj po tejto stránke. Medzi populárne nástroje v rámci profesionálneho web developmentu určite patria Sass a Less. V tomto článku sa pozrieme na použitie pre-processora Less v populárnom vývojovom prostredí Eclipse, keďže jeho inštalácia a konfigurácia nemusí byť až tak jednoduchá, ako sa na prvý pohľad zdá.
Celú konfiguráciu a inštaláciu Less je možné zhrnúť do nasledujúcich piatich krokov.
1. Inštalácia Less
  • Stiahnutie pre-processora Less.js pre Windows (https://github.com/duncansmart/less.js-windows/releases)
  • Rozbalenie archívu a inštalácia napríklad do adresára C:\Less
2. Inštalácia Node.js
  • Stiahnutie Node.js pre Windows (http://nodejs.org/)
  • Inštalácia súboru
3. Inštalácia Xtext SDK
  • Spustiť Eclipse
  • Otvoriť Eclipse Marketplace
  • VyhľadanieXtext SDK (org.eclipse.xtext.sdk.feature.group - Eclipse Modeling Project)
  • Inštalácia zásuvného modulu
4. Inštalácia Less
  • Vyhľadanie LESS (net.vtst.ow.eclipse.less.feature.feature.group - Vincent Simonet)
  • Inštalácia zásuvného modulu
5. Vytvorenie konfigurácie pre Less
  • Run Configuration / LESS Compiler / pravé tlačidlo (right click) / new configuration
    • Nastavenie názvu (Name) - názov vytváranej konfigurácie
    • Nastavenie LESS command: C:\Less\less.cmd
    • Nastavenie Input File (vyhľadanie súboru *.less, ktorý sa bude kompilovať (transformovať na *.css)

Kompilácia Less v Eclipse

Pre spracovanie obsahu súboru *.less je potrebné spustiť kompiláciu. Tá bola nakonfigurovaná v poslednom bode. Stačí kliknúť na šípku vedľa ikony Run, zo zobrazeného menu vybrať Run As a potom LESS Compiler. Kompilátor následne vytvorí / prevedie súbor s príponou *.less na súbor s príponou *.css.

Záver

V prípade, že používateľ už má nainštalovaný Xtext, bod číslo 3 môže vynechať. Obdobne je možné postupovať aj pri Node.js.


CSS,Less,eclipse,configuration,xtext,pre-processor
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest