Korte introductie: .LESS

Om Maintenance101 te laten passen bij de huisstijl van onze klanten, hebben we besloten dat het thema een instelbaar kleurenpalet heeft. Zo kun je er voor zorgen dat een systeem dat qua techniek voor iedere klant hetzelfde is, toch een compleet andere uitstraling kan hebben per klant.

Op dit moment staat in de code van Maintenance101 gedefinieerd welke elementen verschillende kleuren kunnen bevatten. Tijdens de ontwikkeling van Maintenance101 worden steeds nieuwe modules toegevoegd die allen voor zich ook specifieke styling met zich meebrengen. In de huidige situatie zal je dus continu in de code nieuwe elementen toe moeten voegen of verwijderen om er voor te zorgen dat het systeem voor alle klanten nog op alle elementen de juiste kleuren toont. Dat kan handiger.

@HoofdKleur: #de0c0c;
@SubKleur: #333;

a:hover {
color: @HoofdKleur;
}

a.button {
background-color: @HoofdKleur;
color: #SubKleur;
}

In dit voorbeeld maken we twee variabelen aan. Een hoofd- en een subkleur. Vervolgens kun je deze waar je maar wil aanroepen in de .LESS stylesheet. Dit zou een mooie oplossing zijn voor het instellen van de kleuren voor de klant. Er is echter veel meer mogelijk. Je kunt bijvoorbeeld complete classes opnieuw toepassen, binnen een andere class.

@HoofdKleur: #de0c0c;
@SubKleur: #333;

.afgerond {
border-radius: 5px;
}

.schaduw {
box-shadow: 0 0 3px 0 rgba(0,0,0,.5);
}

.box {
width: 100px;
height: 100px;
background-color: @HoofdKleur;
color: @SubKleur;
.afgerond;
.schaduw;
}

In dit voorbeeld zie je een drietal classes. Eén voor het maken van ronde hoeken, één voor het maken van schaduw en één voor het maken van een box. Je ziet dat het mogelijk is om classes éénmalig aan te maken en deze vervolgens onbeperkt te gebruiken in andere classes. Dit zorgt voor veel kortere stylesheets. Ook is het mogelijk om te rekenen in de stylesheet.

.container {
width: @breedte – ( @padding + @randdikte );
}

#boxes {
e(width: -webkit-calc(100% – 85px));
}

Dit kan in sommige gevallen handig zijn, maar er schuilt ook een gevaar in. In de bestaande stylesheet wordt veel aangegeven met min-tekens e.d, deze worden in de .LESS stylesheet dan dus ook echt gezien als min-tekens waardoor fouten ontstaan. Het is mogelijk om een uitzondering te maken in de .LESS-stylesheet. Je ziet dat in het voorbeeld door er een e (van Escape) omheen te plaatsen. Deze regel zal dan niet worden geconverteerd. Samenvatting .LESS is een leuke techniek met hele grote voordelen. Toch zijn er ook best wat nadelen te bedenken waardoor ik nog niet zeker weet of we deze techniek definitief moeten gaan gebruiken in onze applicaties.

Samenvatting

+ Variabelen kunnen gebruiken in stylesheets
+ Kleinere stylesheets die gemakkelijker leesbaar zijn
+ Complete classes kunnen hergebruiken in andere classes
+ Rekenen in je stylesheet

– Extra plugin die stylesheet converteert, dus langere laadtijd
– JavaScript is ineens absoluut noodzakelijk voor je webapplicatie
– Bij element inspecteren worden geen regelnummers meer getoond