Työkalut LESSin kanssa työskentelyyn, artikkelin käännös

Alkuperäinen artikkeli löytyy osoitteesta magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

Työkalut LESSin kanssa työskentelyyn

Jatkona David Hurleyn artikkeliin Do LESS in Joomla! (käännös löytyy tältä foorumilta www.joomla.fi/foorumi/yleiset-kysymykset-3-0/3336-less-joomlassa-artikkelin-kaannos ), on tämän artikkelin kirjoittaja listannut työkaluja ja ohjelmia, jotka helpottavat käyttäjää työskentelemään LESSin kanssa ja lisäämään sen sivuillensa. Artikkeli sisältää kuvaukset useista työkaluista, joihin PB Web Developmentin työharjoittelijat ovat törmänneet opiskellessaan Joomlaa ja LESSiä.

Koodia korostavat editorit

Ensimmäiseksi työkaluksi on hyvä hankkia jonkin asteinen koodin korostaja. Yleisin sivuston tekoon käytettävistä työkaluista on Dreamweaver. Vaikka se on aikansa elänyt vanhus, jota ammattikäyttäjät kammoksuvat, on se hyvä tapa kokemattoman käyttäjän tai suunnittelutaustaisen henkilön harjoittelua varten, ennen siirtymistä raskaampiin editoreihin kuten Eclipse, NetBeans tai PHPStorm.

Dreamweaverissa on loistava sisäänrakennettu CSS koodia korostava editori ja täydentävä CCS-koodin täyttö, mutta LESSin kanssa työskenneltäessä se ei toimi avain noin vain.
Dreamweaveriin tulee lisätä ylimääräinen lisäosa ( www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522 ), joka mahdollistaa ylimääräisen LESS koodinkorostuksen. Tämän voi ladata Adoben lisäosasivulta.

Maceille hyvin suosittu visuaalinen koodaaja on Coda 2, jolle löytyy hieno LESS-koodin syntaksikorostajamoduuli, jonka voi lisätä tähän editoriin.

Seuraavaksi tarvitaan LESS-kääntäjä. Vanhat selaimet eivät välttämättä tunnista LESS-tiedostoja, eivätkä osaa renderöidä LESS-funktioita, mixinejä jne.

LESS-kääntäjä

Kun tarvittava LESS-koodi on tuotettu, sitä ei voida testata ennen kuin se on muunnettu CSS:ksi. Jotkin Joomlan sivupohjasovelluskehykset sisältävät LESS-kääntäjän sisäänrakennettuna, tehden tästä hieman helpompaa dynaamista vauhdista testaamista varten, mutta paikallisella koneella tai kehitysympäristössä testatessa se saattaa olla jopa vaikeampaa.
Tässä tilanteessa erillinen LESS-kääntäjä voi auttaa prosessissa.

CrunchApp
CrunchApp ( crunchapp.net/ ) on nopea ja helppokäyttöinen lisäosa, joka kääntää LESS-tiedostot ja antaa käyttäjälle virheilmoituksen osoittaen mahdollisten virheiden paikat. Mikään ei ole yhtä hauskaa, kuin yrittää manuaalisesti löytää se yksi puuttuva sulku koodista.

SimpleLess
SimpleLess ( wearekiss.com/simpless ) on sekä Windowsilla, että Macilla toimiva työkalu, joka mahdollistaa yksinkertaisen vedä ja pudota–kääntämisen LESS-tiedostoille. Se tarkkailee muutoksia tiedostoissa ja uudelleen kääntää ne siltä istumalta, jotta käyttäjä voisi testata niitä sivuillaan koodaamisen ohessa. Poistamalla tuon yhden tehtävän välistä se tekee elämästä huomattavasti helpompaa.

Dreamweaver LESS-kääntäjä
Dreamweaver LESS-kääntäjä ( www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522 ) ei ole paras, eikä toimi aina. Meillä ei ole ollut erityisemmin onnea sen käytön kanssa, mutta jos jollakin on parempia kokemuksia, kuulisimme niistä mielellämme.

WinLess
Windows-kehittäjille WinLESS on loistava työkalu automaattiseen LESS-tiedostojen kääntämiseen suoraan CSS:än. Se seuraa ja tarkkailee muutoksia LESS-tiedostoihin ja kääntää ne.

Internetistä löytyvä Win-kääntäjä
Jos on tarvetta nopeasti testata ja varmistaa LESS-koodia, WinLessin luoma netissä oleva kääntäjä on kokeilemisen arvoinen. Se on nopea ja helppokäyttöinen kääntäjä, joka korostaa esiintyvät virheet helposti nähtäväksi ja korjattavaksi.

Korostaja- ja kääntäjäkokonaisuudet

Toisesta ääripäästä osaaville koodaajille, joita ei pelota ajatus itse koodin kanssa työskentelystä, löytyy PHPStorm. LESS-korostukset, kääntäjät ja useat muut herkut ovat suoraan tarjolla PHPStormissa ( plugins.jetbrains.com/plugin?pr=idea&pluginId=7059 ). Se on tosin maksullinen editori.

Open source puolelta löytyy muitakin suosittuja vaihtoehtoja, jotka toimivat samaan tapaan korostuksen ja kääntämisen suhteen.

NetBeans on hyvin suosittu LESS-lisäosa, jonka voi asentaa editoriin.

Eclipse, toinen suosittu vaihtoehto koodieditorille sisältää myös LESS-korostukseen ja käännökseen sopivan moduulin.

Millaista tahansa koodieditoria etsittäessä vaihtoehtoja kyllä löytyy.

LESS vielä harjoitteluvaiheessa?

LESSin opettelu kannattaa, varsinkin nykytilanteessa jossa useat sivupohjankehittäjät ovat liikkumassa samoihin suuntiin. LESS tekee kehitys- ja lisäysprosesseista nopeamman modernien verkkosivujen luonnissa.

Paras paikka alkaa opetella LESSiä on lesscss.org/ .



Artikkeli PDF-muodossa: