Het gebruik van less, een css plugin

Ben je het ook beu om altijd opnieuw het html-element en zijn parents te herhalen, om zo unieke css per element te schrijven? Zou je wel willen gebruik kunnen maken van variabelen en functies in CSS?

Denk maar eens aan een uitgebreid menu met vb. 3 niveaus. De elementen krijgen allemaal aparte stijlen per niveau en moeten dus ook apart aangesproken worden. Dit zorgt nogal voor wat regels css, het nesten van die regels zou toch een handige feature zijn.

Less is more?

Less is een JavaScript plugin die de huidige mogelijkheden van CSS zal gaan uitbreiden. Het laat je toe variabelen, functies en mixins te gebruiken. Daarnaast kan je de verschillende css definities gaan nesten wat voor meer overzichtelijke css-code zal zorgen.

Als we het eerder aangehaalde voorbeeld nemen dan zouden we het menu met 3 niveaus in less als volgt kunnen herschrijven. In de eerste blok kan u een voorbeeld vinden waarin we de 3 li-elementen per niveau apart zouden gaan stijlen, in gewone CSS.

ul { ... }
ul li { ... }
ul li ul li { ... }
ul li ul li ul li { .... }

Stel dat we dit met Less zouden gaan doen, kunnnen we bovenstaande css-code herleiden naar het volgende:

ul {
  li {
    ul li {
      ul li {

      }
    }
  }
}

We starten dus met de patent en ieder kind maakt deel uit van de container van zijn parent. Op die manier krijg je een boomstructuur van al je elementen en kan je snel de stijlen van een bepaald element terugvinden.

De 2 bovenstaande stukken code zullen identiek hetzelfde resultaat hebben maar zijn anders opgebouwd. De gebruiker of bezoeker van de website ervaart hetzelfde, we spreken hier enkel over het praktische leven van een webdesigner.

Functies en variabelen

In less is het mogelijk om functies en variabelen te definiëren.

Een voorbeeld: stel dat we voor een bepaalde font een functie wensen aan te maken, zodat we die op eender welke plaats kunnen gebruiken.

.font1 { font-family: Verdana; font-size: 18px; font-weight: bold; color: #DDD; }

h1 { .font1; }
h2 { .font1; font-size: 16px; }
h3 { .font1; font-size: 14px; }

In bovenstaand voorbeeld maken we een functie font1 aan en vervolgens 3 elementen (H1, H2 en H3) die deze font gebruiken. Daarnaast zorgen we er bij de H2 en H3 ervoor dat de font iets kleiner zal worden.

Een variabele is als volgt aan te maken:

@color1: #DDD;

H2 { color: @colo1r; }

Voordelen

• Het is vanzelfsprekend dat gebruik van less ervoor zorgt dat je tot een nettere manier van css schrijven komt. Door alles te nesten heb je  een duidelijk overzicht van je css-code en kan je snel een bepaalde stijl terugvinden en aanpassen. Dit alles kan natuurlijk ook bereikt worden met de traditionele methode maar less maakt het een stuk eenvoudiger.
• Het gebruik van functies en variabelen is voor mij het grootste voordeel van less. Net zoals het schrijven van code overzichtelijk en makkelijk aanpasbaar moet zijn zorg je met less-functies voor hetzelfde in je css-code. Een stijl of kleur aanpassen dien je maar op 1 plaats te doen.

Nadelen

• Er moet een extra JavaScript plugin geïnstalleerd en gebruikt worden door de website.
• Het gebruik van less is een andere manier van denken. Het vraagt een beetje tijd om eraan te wennen maar zeker voor grote projecten is het een gemakkelijke manier van werken.