LESS: wat het is en waarvoor het wordt gebruikt
Voor het opmaken van een webdocument heb je Cascading Style Ssheet, kortweg CSS. Daarmee zeg ik niets nieuws. Het maken van CSS is vrij bewerkelijk, zeker als je rekening moet houden met allerhande vendor-prefixes.
Het ligt dan ook voor de hand dat mensen naar wegen zoeken om het wat eenvoudiger te maken. De oplossing is gevonden in uitbreiding van de syntax van CSS. Hiervan bestaan inmiddels vele benaderingen en implementaties. De meest bekende zijn LESS en SASS/SCSS. Dit verhaal gaat over LESS. Op deze website vind je ook een verhaal over SASS en SCSS.LESS
LESS een afkorting voor Leaner Style Sheets. Lean betekent in dit verband: afgeslankt. Op het
moment dat dit wordt geschreven is 2.3.1 de geldige versie. De website is lesscss.org.
Het idee voor LESS is afkomstig van SASS, dat is geschreven in de programmeertaal Ruby;
LESS is geschreven in JavaScript.
LESS is bedoeld om het schrijven van CSS te vereenvoudigen. Je verkleint de code door eigenschappen één keer
toe te kennen aan een CSS-eigenschap. Die techniek heet Mixins. Het scheelt aardig wat typen en/of knippen en plakken.
Het is ook mogelijk om variabelen gebruiken. De naam van een variabele begint met een @, zie het voorbeeld:
De LESS-code
// @radius is een variabele met waarde 5px
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners; // afgeronde hoeken met straal 5px
}
#footer {
.rounded_corners(10px); // afgeronde hoeken met straal 5px
}
compileert tot deze CSS:
#header {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#footer {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Zoals je ziet blijft de syntax heel dicht bij CSS.
Variabelen en Mixins zijn overigens maar een paar van de vele mogelijkheden. De volledige syntax wordt besproken op de
LESS-website.
Sla de LESS-code die je in je webdocument wilt gebruiken op in bestanden met de extensie .less. Je linkt ze aan
je webdocument met:
<link rel="stylesheet/less" href="styles.less">
Vervolgens link je de JavaScript-file less.js:
<script src="less.js"></script>
De file less.js download je van GitHub. Klik op de groene knop met de tekst Clone or download en daarna op Download ZIP. Pak de file https://github.com/less/less.js uit. In de map dist vind je less.js, samen met een geminificeerde versie.
Je kunt ook een CDN gebruiken:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js">
</script>
Deze URL bevat het versienummer van LESS. Wees er op bedacht dat dit kan veranderen!
Hierboven is al de term Compileren gevallen. In dit verband wordt hieronder verstaan: Het omzetten van LESS-code naar voor de browser bruikbare CSS.
Opmerkingen:
- Zet de code in de <HEAD>. De .less-bestanden eerst, daarna het JavaScript-bestand less.js..
- Als je meerdere .less bestanden meegeeft, worden die apart gecompileerd. Eventuele variabele, mixins, enz., worden niet meegenomen van het ene bestand naar het ander. Zaken die je in het ene bestand definieert zijn dus niet beschikbaar in de andere bestanden.
- Er wordt geen apart .css-bestand gemaakt. De benodigde browser- en document-objecten worden direct door less.js gemaakt
Gebruik:
LESS wordt vooral gebruikt door professionele developers, die soms werken met enorme CSS-bestanden. Voor een eenvoudig opgemaakte
website is LESS dan ook niet echt nodig. Sterker nog: de hierboven beschreven methode vertraagt het laden van de website, omdat
er eerst een vertaalslag moet plaatsvinden van LESS naar CSS.
Het is ook mogelijk om LESS te laten uitvoeren aan de serverkant. De gegenereerde CSS wordt naar de gebruikers-PC gestuurd als onderdeel van het betreffende HTML-bestand. Daarvoor is het nodig dat de server overweg kan met JavaScript. Vaak wordt daarvoor Node.js ingezet. Dat is een JavaScript-pakket dat draait op de server. Het voert te ver om daar op deze site uitgebreid op in te gaan. Zie ook het item Node.js: Wat het is en waarvoor je het kunt gebruiken.
Tenslotte:
Het past niet in de gedachte achter deze website om tools als LESS in te zetten bij het maken van webdocumenten. Dat gebeurt
op deze site dan ook niet. Ook in de code-voorbeelden zul je geen LESS of iets dergelijks tegenkomen.
