LESS

LESS is een dynamische stylesheet-programmeertaal waarmee CSS-stylesheets efficiënter kunnen worden geschreven. Hier vind je uitgebreid antwoord op de vraag; wat zijn de voordelen van LESS?

Wat is LESS?

LESS is een dynamische stylesheet-programmeertaal waarmee CSS (Cascading Style Sheets, waarmee een website wordt voorzien van kleuren, beeld en lettertypen) kan worden gecompileerd. Met LESS heeft de programmeur functies en variabelen tot de beschikking, zodat CSS-code sneller en efficiënter kan worden geschreven.

De voordelen van LESS

Tijdsbesparing

Waarom zo veel programmeurs gebruik maken van zogenaamde preprocessors van CSS is omdat het de code overzichtelijker en makkelijk aan te passen maakt. Voordat de stylesheet-code naar de browser wordt gestuurd, wordt door een compiler LESS-code omgezet in CSS. Doordat je variabelen kunt inzetten om kleuren en locaties van lettertypen en afbeeldingen te definiëren, is het aanpassen van een enkele regel voldoende om de hele website (of webapplicatie) een alternatieve stijl te geven. Dit scheelt veel tijd en zorgt er bovendien voor dat de code voor andere programmeurs gemakkelijker te begrijpen is.

Gebruik van variabelen

LESS maakt dus gebruik van variabelen, zoals @main-color: #FF2400;, die vervolgens overal in de stylesheet kan worden gebruikt. Wanneer de variabele in de definitie wordt aangepast, wordt – na opnieuw compileren van de code – de CSS herschreven met de nieuwe definitie. De variabele @main-color kan met ingebouwde functies zoals fade(@main-color,10); zelfs gemanipuleerd worden. De hoofdkleur rood zoals in het voorbeeld hierboven wordt nu door de preprocessor 10% transparant gemaakt. Het is daarmee voor de programmeur niet meer nodig dit in normale, vrij complexe CSS-code uit te schrijven en bespaart daarmee tijd.

Complexe functies

LESS laat toe zelf complexe functies te schrijven, die hulp bieden bij het definiëren van locaties van lettertypen en afbeeldingen of bijvoorbeeld het responsief maken van een webpagina. Bij Ambrero gebruiken we LESS in veel projecten om overzichtelijke en gemakkelijk aanpasbare code te schrijven, die zonder al te veel gedoe kan worden begrepen en aangepast door verschillende programmeurs. Inmiddels maken veel van onze projecten gebruik van het alternatieve SASS, omdat het veelgebruikte framework Bootstrap in de nieuwste versie gebruik maakt van deze preprocessor.

De voordelen van LESS op een rij:

  • Variabelen om wijzigingen in bijvoorbeeld kleuren snel door te voeren
  • Minder code nodig om hetzelfde voor elkaar te krijgen
  • Tijdbesparing door complexe CSS-code achterwege te laten
  • Veel betere onderhoudbaarheid en leesbaarheid