Less: makkelijk uitgedrukt een programmeertaal voor CSS die je mits je het slim aanpakt een hoop tijd bespaart. Bestandsextensie is .less.

Voorbeeld

Wil je als basiskleur zwart gebruiken dan kun je in je lessbestand b.v een variable @color1 de waarde #fff geven. Vervolgens kun je in plaats van "h1{color:#ffffff;}" de vervanger "h1{color:@color1;}" gebruiken.

Voor één element is dat niet zo boeiend, maar als we het hebben over een basiskleur binnen je template die te pas en te onpas in je css voorkomt dan is het voordeel evident. Wil je de basiskleur wijzigen dan hoeft dat alleen in de variabele-definitie, en niet in je hele css. Stap verder, voor een kleurenpalet is het helemaal makkelijk invullen en wijzigen. Dit is een eenvoudig voorbeeld, op de Less-site onder het menuitem "Language" zijn veel complexere toepassingen te lezen.


Wat nu volgt is wat ik vanmiddag heb moeten doen om iets Less-achtigs op een Windowsmachine (ja, die mensen bestaan ook) te kunnen doen, ervaar hoe makkelijk het eigenlijk is, het kostte 30 minuten om te kunnen beginnen.

Stap 1 - een compiler

De compiler vertaalt je .less bestand naar een css bestand. Met andere woorden volgend op bovenstaand voorbeeld: overal waar jij @color1 hebt gebruikt, zal de compiler daar weer netjes #ffffff invullen. Zo wordt het geheel begrijpelijk voor de browser.

Je kunt gebruik maken van een compiler aan de serverkant of op je eigen computer. Ik heb het tweede gedaan en het eerste gelaten voor wat het was. Ik kwam zo snel twee compilers tegen: Simpless en Winless. Ik heb eerst Simpless geïnstalleerd. Simpless hield ineens op met werken en door Winless te installeren kwam ik erachter dat er een compilatie-error was dus ben ik bij Winless blijven hangen, want die geeft de compilatie-errors met naam en toenaam aan.

Stap 2 - een editor

Mijn Dreamweaver 5.5 vond dat ik mocht gaan wieberen (unknown fileformat .less) maar Notepad++ wilde best een .less bestand openen. Alleen zag het er enorm eentonig uit, geen opmaak of niks. Via mijn beste vriend Google kwam ik dit artikel tegen om formatting van .less bestanden in Notepad++ te krijgen: "How to enable syntax-highlighting in Notepad++ for Less". Volg de stappen zoals ze daar staan (bestand downloaden via "save link as") en je hebt .less formatting in Notepad++. Er zijn ongetwijfeld betere opties voor .less editting onder Windows (hoop ik) maar officeel ben ik natuurlijk nog in de verkenningsfase van Less.

Stap 3 - waar het om gaat, vergeet niet te compileren, geniet en leer

Voeg de folder met je .less bestand toe aan de compiler, werk aan je .less bestand, compileer het naar een .css bestand en GENIET! Ik schreef het hierboven al: "hoe heb ik ooit zonder gekund". Lui als ik ben. Nu volg ik het advies van Mathias Verraes how to read more books, er staat een mooie PDF over Less op mijn tablet.

 

 

 



 

Wil je meer informatie?    Neem contact op

 

Go To Top