in welke webtoepassingen wordt het noodzakelijk

IN WELKE WEBTOEPASSINGEN WORDT HET NOODZAKELIJK OM
SASS OF LESS TE INTEGREREN
PROMOTOR: MEVR LIES PINKET
ONDERZOEKSVRAAG UITGEVOERD DOOR
SAM BAUTERS
VOOR HET BEHALEN VAN DE GRAAD VAN BACHELOR IN DE
NEW MEDIA AND COMMUNICATION TECHNOLOGY
HOWEST | 2015-2016
Bachelorproef Sam Bauters
3
Woord vooraf
Mijn naam is Sam Bauters en ik studeer New Media & Communication Technology (NMCT) aan de
hogeschool West-Vlaanderen (Howest) Kortrijk. Van kindsbeen af ben ik geboeid door IT en volg ik de
laatste nieuwe technologieën op de voet. Ik koos voor de NMCT omdat deze opleiding een brede waaier
heeft aan modules die kunnen gevolgd worden, omdat ik op dat moment nog niet goed wist welke
richting als IT’er ik wou uitgaan, leek NMCT mij de ideale oplossing.
Momenteel loop ik 13 weken stage bij het bedrijf Endare uit Gent. Endare helpt organisaties hun bedrijf te
transformeren, ze adviseren over de te volgen strategie en bouwen een actieplan met concrete doelen en
mijlpalen. Ze bouwen robuuste, kosten-efficiënte mobiele oplossingen met voorspelbare ROI en
experimenteren met de nieuwste technologieën voordat ze de massamarkt bereiken. Door te kijken naar
de “big picture”, bouwen ze oplossingen die klaar zijn voor de toekomst.
Mijn stageopdracht bestaat uit het realiseren van een klantenportaal die met der tijd kan worden gebruikt
door Endare. Wat de opdracht interessant maakt is dat ik zo goed als volledige controle heb en het
project van 0 mag opbouwen. Voor de backend oplossing gebruik ik Node.JS, voor de frontend zal ik
gebruik maken van 1 in deze bachelorproef besproken preprocessors, dit sluit dan weer aan op mijn
bachelorproef.
Graag wil ik alvast Endare bedanken om mij de kans te bieden kennis te vergaren over het opstarten en
voltooien van een volwaardig project. Tot slot wil ik ook mijn stagebegeleider Sander Goossens, de
collega’s met in het bijzonder Steven Van Poucke en Mathias Van Houtte, en mijn stagementor Lies Pinket
bedanken voor de begeleiding, raadgeving en feedback doorheen dit semester.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
4
Abstract
Deze bachelorproef is gericht op bedrijven en developers die hun projecten met behulp van
preprocessors naar een hoger niveau willen tillen.
Webapplicaties zijn niet meer weg te denken uit ons digitale leven. Je maakt er soms gebruik van zonder
dat je het zelf door hebt. Natuurlijk ontstaan deze applicaties niet zomaar. Deze webapplicaties worden
ontwikkeld door webdevelopers. Om een aantrekkelijke applicatie te maken wordt er gebruik gemaakt
van meerdere tools. Deze tools nemen een heleboel werk uithanden en zorgen voor het automatiseren
van verschillende handelingen. Doordat er wordt gebruik gemaakt van deze tools, kunnen
webdevelopers veel sneller en overzichtelijker programmeren. Logischerwijs zou dit moeten resulteren in
schonere code die onderhoudbaar is door meerdere personen.
Eerst en vooral wordt er kennis gemaakt met het begrip preprocessors en wat ze nu juist zijn. Ook gaan
we nader bekijken welke tools er zoal op de markt zijn om deze processors nog makkelijker te maken en
krijg je aan de hand van enkele voorbeelden een beter inzicht hoe je aan de slag moet gaan met
preprocessors. Met behulp van voorbeelden en de voor-en nadelen kan er een besluit gevormd worden.
De tools kunnen een meerwaarde bieden bij het optimaliseren in het development proces en zal code
schrijven vergemakkelijken.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
5
Verklarende woordenlijst
W3C: Het World Wide Web Consortium is een organisatie die de web standaarden voor het World Wide
Web ontwerpt, zoals HTML, XHTML, XML, CSS.
DRY: DRY staat voor Don't Repeat Yourself. De term is afkomstig uit de softwareontwikkeling, waar het
verwijst naar het minimaliseren van herhaling van informatie.
Watcher: Een watcher houdt voortdurend de SASS of LESS file in het oog zodat wanneer er iets wordt
aangepast, deze meteen kan worden geüpdatet.
Snippets: Snippet is een term voor kleine herbruikbare code.
Vendor-prefix: Vendor prefixes worden meestal toevoegd door browsers om aan te geven dat het gaat
om experimentele CSS eigenschappen.
CSS Guards: Guards worden gebruikt om warden, nummers of argumenten te vergelijken met expressies.
Kommagescheiden bestand: Een kommagescheiden bestand, of CSV-bestand, in het Engels commaseparated values, is een specificatie voor tabelbestanden.
Ruby gem: RubyGems is een package manager dat een standaard aanbiedt voor het uitvoeren van Ruby
programma’s en bibliotheken.
Python: Programmeertaal ontwikkeld door Guido Van Rossum
Perl: Programmeertaal met eigenschappen van C en UNIX-scripttalen ontwikkeld door Larry Wall
Ada: Ada is een gecompileerde programmeertaal bedoeld voor embedded en real-time systemen.
Eiffel: Zuiver objectgeoriënteerde programmeertaal die C broncode kan genereren
Package manager: Een package manager is een collectie van softwaretools die het proces van
installeren, upgraden, configureren en verwijderen van computer programma’s automatiseert
Prerelease version: Versie van een programma die nieuwe features kan bevatten die nog niet helemaal
op punt staan en daarom nog niet 100% betrouwbaar zijn.
Minificatie: Het proces van het verwijderen van alle onbelangrijke karakters zonder afbraak te doen aan
functionaliteit
Github: GitHub is een website die gebruikmaakt van Git om in groepen aan softwareontwikkeling te
doen. Het werd geschreven met Ruby on Rails
Repository: Een repository is een faciliteit voor het opslaan en beheren van digitale informatie (objecten)
in een via internet toegankelijke vorm.
Scaffolding tool: Scaffolding is een framework dat toelaat om basis CRUD operaties uit te voeren met
databases met weinig of geen code.
Boiler-plates: Een boilerplate is een geheel dat opnieuw kan worden gebruikt in een nieuwe context of
applicatie
Grunt: Grunt is een task runner die zorgt voor het automatiseren van verschillende taken
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
Bower: Bower is een frontend package-maanger, die instaat voor het beheren van een project
Linting: Linting is een process dat de code analyseert op fouten
HSL: Kleurenruimte die wordt gebruikt om kleuren te definiëren. Hue, Saturation, Lightness
HSV: Is een model om kleuren te kunnen beschrijven.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
6
7
Bachelorproef Sam Bauters
Figurenlijst
Figuur 1: CSS Versies ...................................................................................................................................................... 13
Figuur 3: Codekit interface ........................................................................................................................................... 16
Figuur 4: Extenden van selectoren .............................................................................................................................. 21
Figuur 5: Ruby programmeertaal (bron: http://www.ruby-lang.org) ................................................................... 22
Figuur 6: Ruby installer selecteren .............................................................................................................................. 22
Figuur 6: opdrachtprompt installatie SASS............................................................................................................... 23
Figuur 7: gegenereerde lijst met sass versies ............................................................................................................ 23
Figuur 8: Mixture Figuur 9: Scout Figuur 10: Koala Figuur 11: CodeKit Figuur 12: Compass Figuur 13: Prepos
........................................................................................................................................................................................... 24
Figuur 14: Logische mappenstructuur voor SASS files ........................................................................................... 25
Figuur 15: scout GUI
Figuur: 16: Scout project toevoegen .............................................................................. 26
Figuur 16: Scout houdt het project in het oog .......................................................................................................... 27
Figuur 17: compilatie fout in scout ............................................................................................................................. 27
Figuur 18: Yeoman workflow ........................................................................................................................................ 28
Figuur 19: Yeoman commando interface .................................................................................................................. 29
Figuur 20: Commentaar in SASS.................................................................................................................................. 31
Figuur: 21: LESS............................................................................................................................................................... 32
Figuur 22: LESS in PHPSTORM ..................................................................................................................................... 33
Figuur 23: Node.JS website .......................................................................................................................................... 35
Figuur 24: NPM ................................................................................................................................................................ 36
Figuur 25: SimpLESS
Figuur 26: Crunch ........................................................................................................ 37
Figuur: 27: Font Awesome ............................................................................................................................................ 40
Figuur 28: HSL & HSV ..................................................................................................................................................... 41
Figuur: 29: Cardinal ........................................................................................................................................................ 42
Figuur 30: Ionic................................................................................................................................................................ 43
Figuur 31: Semantic Grid System ................................................................................................................................ 43
Figuur 32: SASS Documentatie .................................................................................................................................... 45
Figuur 33: LESS Documentatie .................................................................................................................................... 45
figuur 34: SASS foutmelding ......................................................................................................................................... 47
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
8
figuur 35: LESS foutmelding ......................................................................................................................................... 47
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Inhoudsopgave
Woord vooraf .................................................................................................................................................................3
Abstract ...........................................................................................................................................................................4
Verklarende woordenlijst ............................................................................................................................................5
Figurenlijst ......................................................................................................................................................................7
Inhoudsopgave..............................................................................................................................................................9
Inleiding ....................................................................................................................................................................... 12
1.
2.
CSS ............................................................................................................................................................................ 13
1.1
Wat is css? ....................................................................................................................................................... 13
1.2
Wie onderhoudt CSS? ................................................................................................................................... 13
1.3
CSS versies ...................................................................................................................................................... 13
Preprocessors ......................................................................................................................................................... 14
2.1
Introductie tot Preprocessors ..................................................................................................................... 14
2.2
Wat zijn Preprocessors? ............................................................................................................................... 14
2.3
Waarom preprocessors gebruiken? ........................................................................................................... 15
2.3.1
Je code is makkelijker te onderhouden ........................................................................................... 15
2.3.2
Gemakkelijk op te zetten ..................................................................................................................... 15
2.3.3
Bespaar tijd ............................................................................................................................................ 15
2.3.4
Project modulair opbouwen ............................................................................................................... 15
2.4
Misvattingen over preprocessors ............................................................................................................... 16
2.4.1
Je moet een expert zijn in command line ........................................................................................ 16
2.4.2
Je moet je ontwikkelmethode hoe je CSS schrijft aanpassen. .................................................... 16
2.4.3
Waarom CSS niet direct schrijven? .................................................................................................... 16
2.4.4
SASS vergt de installatie van meerdere programma’s .................................................................. 16
2.5
Kenmerken van preprocessors ................................................................................................................... 17
2.5.1
Variabelen ............................................................................................................................................... 17
2.5.2
Nesting .................................................................................................................................................... 17
2.5.3
Import ...................................................................................................................................................... 18
2.5.4
Mixins ....................................................................................................................................................... 18
2.5.5
Extend / Inheritance ............................................................................................................................. 19
2.5.6
Operatoren ............................................................................................................................................. 19
2.5.7
Lussen...................................................................................................................................................... 20
2.6
Problemen met preprocessors ................................................................................................................... 20
Bachelorproef Sam Bauters
3
2.6.1
Problemen met Mixins ......................................................................................................................... 20
2.6.2
Het extenden van selectoren kan de file onderhouden moeilijker maken ............................... 21
SASS .......................................................................................................................................................................... 22
3.1
SASS installeren ............................................................................................................................................. 22
3.1.1
3.1.2
Ruby ..................................................................................................................................................... 22
Ruby installeren ..................................................................................................................................... 22
3.2
Installatie ......................................................................................................................................................... 23
3.3
Andere versies van SASS bekijken .............................................................................................................. 23
3.4
Alternatief: installatie via GUI ...................................................................................................................... 24
3.5
Stel een watcher in op je SASS file ............................................................................................................. 25
3.6
Organiseren van SASS bestanden .............................................................................................................. 26
3.7
Alternatief op command line: Scout .......................................................................................................... 26
3.8
Problemen met Scout................................................................................................................................... 27
3.9
Automatiseren van de workflow................................................................................................................. 28
3.9.1
Yeoman ................................................................................................................................................... 28
3.9.2
Installeren van Yeoman ....................................................................................................................... 29
3.10
Data Types ...................................................................................................................................................... 30
3.10.1
4
10
Strings ..................................................................................................................................................... 30
3.11
Commentaar in SASS ................................................................................................................................... 31
3.12
Interpolatie ..................................................................................................................................................... 32
LESS .......................................................................................................................................................................... 32
4.1
Client-Side variatie ........................................................................................................................................ 33
4.2
Server-Side Variatie ....................................................................................................................................... 34
4.2.1
4.3
Compileren van een LESS bestand.................................................................................................... 34
Node.JS ........................................................................................................................................................... 35
4.3.1
NPM .......................................................................................................................................................... 35
4.4
Comprimeren en minimaliseren van CSS ................................................................................................. 36
4.5
Alternatief: Grafische User Interface .......................................................................................................... 37
4.6
Commentaar in LESS .................................................................................................................................... 38
4.6.1
Geneste commentaar........................................................................................................................... 38
4.6.2
Speciale commentaar .......................................................................................................................... 38
4.7
Lazy loading .................................................................................................................................................... 38
4.8
Ingebouwde functies .................................................................................................................................... 39
4.8.1 Javascript ........................................................................................................................................................ 39
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
11
4.8.2
List Functies............................................................................................................................................ 39
4.8.3
Kleur functies ......................................................................................................................................... 40
4.9
LESS gebruiken in frameworks ................................................................................................................... 41
4.9.1
Cardinal CSS ........................................................................................................................................... 42
4.9.2 Ionic................................................................................................................................................................. 43
4.9.3 Semantic Grid System ................................................................................................................................. 43
5
Stappenplan SASS of LESS .................................................................................................................................. 44
5.1
Installatie ......................................................................................................................................................... 44
5.2
Taal ................................................................................................................................................................... 44
5.3 Documentatie ....................................................................................................................................................... 45
5.4
Extensies.......................................................................................................................................................... 46
5.5
Fout afhandeling ........................................................................................................................................... 46
5.6
Overzicht SASS vs LESS ................................................................................................................................ 47
5.7
Conclusie ......................................................................................................................................................... 48
Referentielijst .................................................................................................................................................................. 49
Figuur Referentielijst...................................................................................................................................................... 51
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
12
Inleiding
Preprocessors zijn de dag van vandaag niet meer weg te denken bij klein- en grootschalige projecten en
wint dag na dag aan populariteit onder de ontwikkelaars. Om steeds mee te zijn met de laatste nieuwe
trends worden er geregeld nieuwe versies uitgebracht voor zowel SASS als LESS. Natuurlijk zijn er
meerdere preprocessors beschikbaar dan laatstgenoemden maar deze 2 steken er momenteel met kop
en schouders bovenuit.
Wanneer we gaan kijken naar 1 van de hoofddoelen van een bedrijf, dan is dat een robuust product met
schone code afleveren en liefst nog zo snel mogelijk, want het hoofddoel van een bedrijf blijft winst en
omzet draaien. Het gebruik van een preprocessor kan hier zeker toe bijdragen. Een css-preprocessor
maakt het mogelijk snel ‘schone’ CSS code te schrijven en gebruik te maken van mogelijkheden die
normaal gesproken veel tijd in beslag nemen. Ook wijst de preprocessor je op eventuele syntax-fouten
die je maakt en kun je de CSS makkelijk minimaliseren. Dit scheelt weer in de laadtijd van de website.
In deze bachelorproef zetten we de preprocessors SASS en LESS lijnrecht tegenover elkaar, bekijken hun
mogelijkheden, raakvlakken en onderlinge verschillen. Naast de features die beide preprocessors
bevatten, bekijken we ook nader hoe je beide kan installeren en gebruiken aan de hand van een grafische
user interface, in plaats met het gebruik van de commandolijn.
Het eerste deel zal zich richten tot wat preprocessors zijn met een beetje geschiedenis over het ontstaan
van CSS. Het tweede deel zal zich buigen over SASS met onder andere de installatie, data variabelen,
bestanden organisatie en interpolatie. Aansluitend gaan we over tot LESS met onder andere hoe de files
worden geminimaliseerd en welke functies die zoal bevat. Tot slot gaan we over tot een stappenplan en
persoonlijk besluit waar je het antwoord zal kunnen afleiden met betrekking tot de bachelorproef titel.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
1.
13
CSS
1.1 Wat is css?
Cascading Style Sheets, ook wel bekend als CSS, is een designtaal bedoeld om het proces tot het maken
van een presentabele webpagina te vergemakkelijken.
CSS bepaalt de look and feel van de webpagina. Met het gebruik van CSS heb je controle over de kleur
van je tekst, het lettertype, de plaatsing van je kolommen en nog veel meer.
CSS is makkelijk om te leren en te begrijpen en beheert de volledige opmaak van je HTML pagina. In de
meeste gevallen wordt CSS gecombineerd met HTML, XHTML en Javascript.
1.2 Wie onderhoudt CSS?
CSS is uitgevonden en wordt onderhouden door een groep van mensen binnen het W3C genaamd de CSS
Working Group. De CSS Working Group creëert documenten genaamd specifications. Wanneer een
specificatie officieel is goedgekeurd door de W3C leden, wordt het een recommendation.
Deze goedgekeurde specifications worden recommendations genoemd omdat het W3C geen controle
heeft over de implementatie van de taal. Onafhankelijke bedrijven en organisaties maken deze software.
1.3 CSS versies
CSS1 werd vrijgegeven door het W3C als recommendation in december 1996. Deze versie beschreef de
CSS taal alsook de simpele visuele opmaak voor alle HTML tags.
CSS2 werd een W3C recommendation in mei 1998 en bouwt verder op CSS1. Deze versie voegt
ondersteuning toe voor specifieke stylesheets zoals printers, downloadbare fonts, positionering en
tabellen.
CSS3, de meest recente versie die reeds in 1999 voor het eerst werd vrijgegeven bestaat uit modules. Het
bevat nog steeds de oude specificaties maar deze werden gesplitst in kleinere modules. Daarnaast
worden er nog steeds nieuwe modules toegevoegd.
Figuur 1: CSS Versies
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
2.
14
Preprocessors
2.1 Introductie tot Preprocessors
HTML5 en CSS3 veranderen de webpagina’s hoe we ze vandaag opbouwen. CSS3 voorziet de developer
van geavanceerde features zoals gradients, animations, transitions en nog veel meer. Deze features
kunnen heel handig zijn maar verhogen wel de complexiteit en het wordt moeilijker om de CSS code te
onderhouden.
Naast de complexiteit wordt het ook moeilijker om CSS code te schrijven, developers moeten vaak
repetitief werk verrichten zoals zoeken achter kleurcodes en het definiëren van margins of paddings. Deze
kleine repetitieve taken nemen veel tijd en beslag en remmen de developer af. Preprocessors zijn
hiervoor de ideale oplossing.
Preprocessors zijn het verlengstuk van de gewone CSS code, gelijk evoluerend met de moderne
developing standaarden. Om SASS of LESS efficiënt te kunnen gebruiken is het sterk aangeraden om
eerst CSS in zijn normale vorm aan te leren. CSS Preprocessors laten je toe om variabelen, functies,
operations maar ook selectors te nesten in je CSS code. Door de preprocessors kan je gebruik maken van
het DRY principe*, dit helpt om repetitieve code te voorkomen.
2.2 Wat zijn Preprocessors?
Een preprocessors leest de bronbestanden in, verwerkt deze en slaat ze dan uiteindelijk op in CSS
bestanden die onmiddellijk worden doorgestuurd naar de browser. Deze preprocessors stellen de CSS in
staat om de ondoeltreffendheid te filteren en de websites gemakkelijker en logischer op te bouwen.
Figuur 2: compileren van SASS code
* Don’t repeat yourself principe
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
15
2.3 Waarom preprocessors gebruiken?
2.3.1 Je code is makkelijker te onderhouden
Het is mogelijk om variabelen, mixins en functions te gebruiken. Dit betekent dat je meerdere groepen
van waarden kan definiëren aan het begin van je stijldocument. Wanneer je later de kleuren wil wijzigen
hoef je dit maar op 1 plek te doen. Hieronder een voorbeeld.
@maincolor: #20aaff;
@subcolor: #4d88ff;
a{
@maincolor;
}
primary-nav {
background-color:@accentcolor;
}
2.3.2 Gemakkelijk op te zetten
Een preprocessor file voor je project is makkelijk op te zetten. Met SASS volstaat een simpel commando
om een watcher op je SASS files te zetten en elke keer je je file opslaat wordt deze onmiddellijk opnieuw
omgezet.
2.3.3 Bespaar tijd
Je zal versteld staan van hoeveel tijd je kan besparen door het gebruik van preprocessors. Je bent niet
meer verplicht om meerdere malen opnieuw dezelfde CSS syntax te schrijven.
2.3.4 Project modulair opbouwen
Wanneer U al meerdere projecten hebt gemaakt en dezelfde structurele elementen komen vaak terug, is
het handig om je stijlen op te delen in herbruikbare modules. Terugvallend op puntje 1 is het gemakkelijk
dat je op 1 centrale plaats de kleur kan veranderen dan dit te doen over de hele css file.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
16
2.4 Misvattingen over preprocessors
In dit onderdeel geef ik toelichting over de misvattingen die een ontwikkelaar tegenhouden om een
preprocessor te integreren in hun dagelijkse workflow.
2.4.1 Je moet een expert zijn in command line
Veel ontwikkelaars willen zo veel mogelijk de command line mijden. Om preprocessors te kunnen
gebruiken moet je maar een klein beetje kennis hebben, je hoeft slechts een simpel string commando te
kennen. Er zijn zelfs meerdere applicaties die dezelfde taak uitvoeren zonder dat je zelf de command line
hoeft te gebruiken.
2.4.2 Je moet je ontwikkelmethode hoe je CSS schrijft aanpassen.
Ontwikkelaars hebben een bepaalde flow hoe ze code schrijven en organiseren. Doordat de SCSS syntax
hetzelfde is als CSS, hoeven de ontwikkelaars hun manier van ontwikkelen niet te veranderen.
2.4.3 Waarom CSS niet direct schrijven?
Dit is de eerste reactie die veel ontwikkelaars hebben wanneer ze voor het eerst naar preprocessors
kijken. Wanneer je weinig kennis hebt van CSS zullen preprocessors je zeker niet beter helpen dan
gewone CSS, maar preprocessors helpen je wel om in een snelle en onderhoudbare manier code te
schrijven, aanknopend op het DRY principe.
2.4.4 SASS vergt de installatie van meerdere programma’s
Dat klopt, om SASS te kunnen gebruiken moet je Ruby en GIT installeren. Gelukkig kan CodeKit je hierbij
helpen. Download CodeKit, zet de watcher op je project folder en klaar. Wanneer je gebruik maakt van
Windows kan je LiveReload Alpha gebruiken. Dit vergemakkelijkt het proces om een preprocessor te
gebruiken.
Figuur 3: Codekit interface
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
17
2.5 Kenmerken van preprocessors
In dit onderdeel gaan we door enkele kenmerken die preprocessors gemeenschappelijk hebben. Je zal
meerdere voorbeelden te zien krijgen van SASS & LESS die we verder in dit document zullen behandelen.
2.5.1 Variabelen
Variabelen kunnen je helpen om informatie zoals bv kleurcodes bij te houden om ze later te kunnen
hergebruiken in je stylesheet. In SASS wordt er gebruik gemaakt van het $ symbool om een variabele te
declareren.
$text-color:#333;
body {
color: $text-color;
}
Wanneer de code wordt gecompileerd naar gewone CSS, zal de waarde in text-color worden gebruikt als
color in de body.
body {
color: #333;
}
Verschillend van SASS wordt in LESS het @ symbool gebruikt om een variabele te declareren.
@text-color:#333;
body {
color: @text-color;
}
2.5.2 Nesting
De visuele pikorde op een pagina is niet zo duidelijk in CSS als in HTML. Preprocessors laten je toe om
CSS selectoren te nesten op de manier dat het in HTML gebeurd. Hieronder ziet U een voorbeeld van
nesting in SASS en LESS.
nav{
ul{
margin: 0 auto;
padding: 10px 15px;
}
}
Gegenereerd naar CSS ziet dit er zo uit:
nav ul{
margin: 0 auto;
padding: 10px 15px;
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
18
2.5.3 Import
@import heeft een licht verschillende implementatie dan in gewone CSS. In plaats van op de server de file
op te halen, zal SASS de file ophalen en samenvoegen met de file die je aan het importeren bent. Dit
resulteert in 1 enkele CSS file die gebruikt kan worden door de browser. Stel dat je 2 SCSS files hebt
genaamd reset.scss en style.scss, dan kan je met onderstaand voorbeeld de stijlen samenvoegen
wanneer style.scss je hoofdfile is.
@import ‘reset’;
Body{
Background-color: F8F8FF;
}
Merk op dat er geen extensie wordt gedefinieerd bij het importeren van de SASS file. SASS vindt
automatisch de correcte file en importeert deze.
2.5.4 Mixins
Mixins laat je toe om CSS snippets te declareren die je kan hergebruiken doorheen je stylesheet. Mixins
zijn ook configureerbaar met behulp van parameters en standaardwaarden. Dit komt het best van pas
wanneer je gebruik maakt van vendor-prefixed syntax.
SASS
@include animation(15s, 5s, changecolor)
@mixin animation ($delay, $duration, $animation){
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
}
LESS
@include animation(15s, 5s, changecolor)
@mixin animation (@delay, @duration, @animation){
-webkit-animation-delay: @delay;
-webkit-animation-duration: @duration;
-webkit-animation-name: @animation;
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
19
2.5.5 Extend / Inheritance
Preprocessors geven je de mogelijkheid om collections van CSS eigenschappen te delen tussen 1 of
meerdere selectors. Dit helpt je het DRY principe toe te passen.
SASS
.messageBox{
Font-size: 1em;
Line-height: 20px;
}
.warningBox{
@extend .messageBox;
color: red;
}
LESS
.messageBox{
Font-size: 1em;
Line-height: 20px;
}
.warningBox{
&:extend(.messageBox);
color: red;
}
2.5.6 Operatoren
Met preprocessors kan je standaard eenvoudige wiskundige bewerkingen uitvoeren zoals het omzetten
van meeteenheden, afronden en de minimum en maximum waarde uit een lijst halen.
SASS & LESS
.content{
float: right;
width: 900px / 800px * 100%;
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
20
2.5.7 Lussen
Lussen zijn handig bij het overlopen van een array. LESS gebruikt hierbij CSS Guards en recursieve
mxinins.
SASS
@for $i from 1px to 5px{
.border-#{i}{
Border: $i solid blue;
}
}
LESS
.loop(@counter) when (@counter > 0) {
.loop((@counter -1));
.border-@(counter){ border: 1px * @counter solid blue;
}}
2.6 Problemen met preprocessors
In dit onderdeel wordt beschreven hoe sommige kenmerken van preprocessors verkeerd kunnen worden
gebruikt. Je zal zien dat de meeste problemen worden veroorzaakt door het verkeerd of te veel gebruik
van preprocessors kenmerken.
2.6.1 Problemen met Mixins
Zoals eerder beschreven zijn mixins herbruikbare code blokken die kunnen worden aangeroepen waar
nodig. Dit voorkomt dat je meerdere malen dezelfde code moet schrijven. Zie onderstaand voorbeeld.
SASS
@mixin notification{
color: #fff;
border-radius: 50%;
}
.warningNotification{
@include notification;
background: lightgrey;
}
.successNotification{
@include notification;
background: lightgrey;
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
21
Deze code wordt gecompileerd naar gewone CSS code
.warningNotification{
color: #fff;
border-radius: 50%;
background: lightgrey;
}
.successNotification{
color: #fff;
border-radius: 50%;
background: lightgrey;
}
Merk op dat de code wordt gedupliceerd in voorgaand voorbeeld. Als deze mixin veelvuldig wordt
gebruikt doorheen de CSS file, zou dit resulteren in redundante code en de file bestandsgrootte negatief
beïnvloeden. SASS heeft hiervoor een alternatieve aanpak die niet wordt ondersteund door andere
preprocessors, genaamd extending. Door deze aanpak zal SASS de eigenschappen van meerdere
selectoren gelijktijdig instellen, door de selectoren te specifiëren in een kommagescheiden (commaseperated) bestand.
Deze aanpak voorkomt herhalende code. Echter wanneer te veel selectoren extended worden gebruikt,
kan dit performantie problemen opleveren. De resulterende CSS in het comma-seperated bestand zal te
veel selectoren bevatten, waardoor er perfomantie verlies zal optreden.
2.6.2 Het extenden van selectoren kan de file onderhouden moeilijker maken
Door veelvuldig gebruik te maken van het extenden van klasses of het gebruiken van mixins, wordt het
onderhouden van de file veel moeilijker doordat je gedeclareerde eigenschappen op meerdere plaatsen
gaat gaan gebruiken. De kans dat je een eigenschap aanpast zonder verdere gevolgen in je file is zeer
klein.
Figuur 4: Extenden van selectoren
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
3
22
SASS
3.1 SASS installeren
Je kan SASS installeren via een Ruby gem, dit wil zeggen dat je Ruby moet installeren op je computer.
Wanneer je in het bezit bent van een MAC OS X kan je deze stap overslaan omdat Ruby standaard al
geïnstalleerd is.
3.1.1 Ruby
Figuur 5: Ruby programmeertaal (bron: http://www.ruby-lang.org)
Ruby is een programmeertaal, die ontworpen is om snel en makkelijk object georiënteerd te
programmeren. Ruby wordt het vaakst vergeleken met Python en Perl. Ruby is geïnspireerd op andere
talen zoals Ada en Eiffel, ook heeft Ruby verschillende mogelijkheden om tekstbestanden te verwerken en
systeemtaken af te handelen.
3.1.2 Ruby installeren
Er zijn verschillende manieren om Ruby te installeren:
 Wanneer je werkt op een UNIX gebaseerd besturingssysteem, is de makkelijkste manier door
gebruik te maken van de package manager. Deze Ruby versie is meestal niet de meest recente.
 Installers kunnen worden gebruikt om een specifieke of meerdere versies van Ruby te installeren.
Zo is er ook 1 voor Windows beschikbaar.
 Managers kunnen je helpen om te wisselen tussen meerdere Ruby installaties op je systeem.
In deze scriptie wordt gekozen voor de installer in Windows. Alles is voor handen om een volledige Ruby
omgeving op te zetten. Download het bestand, voer uit en klaar!
Figuur 6: Ruby installer selecteren
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
23
3.2 Installatie
Nu dat Ruby geïnstalleerd is kan je beginnen met de installatie van SASS. Om dit te doen, open de
opdrachtprompt. Dit doe je als volgt:
 Ga naar start  Uitvoeren en typ ‘cmd’.
Eenmaal geopend kan je SASS installeren door het volgende commando te typen in de opdrachtprompt:
gem install sass
Figuur 6: opdrachtprompt installatie SASS
3.3 Andere versies van SASS bekijken
Je kan ook los van de laatste versie alle andere beschikbare versies van SASS bekijken door volgend
commando uit te voeren:
gem list sass –a –r
Dit commando vraagt aan Ruby om een lijst te genereren van alle gems die ‘sass’ in hun naam hebben
staan. Het –r attribuut zegt tegen Ruby om alle beschikbare versies op te zoeken. Het –a attribuut helpt
om een lijst van alle beschikbare versies te genereren.
Figuur 7: gegenereerde lijst met sass versies
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
24
Wanneer je de laatste nieuwe features wil uitproberen die in een stabiele SASS versie nog niet
beschikbaar zijn, kan je overwegen om een prerelease versie te installeren.
sudo gem install sass –pre
Als je in een bepaald project een oudere versie gebruikt die features ondersteund die in de nieuwe versie
verouderd zijn, kan je overwegen om je huidige versie te verwijderen en de oudere versie opnieuw te
gebruiken. Om een SASS versie te verwijderen kan je volgend commando gebruiken:
gem uninstall sass –version versienummer
3.4 Alternatief: installatie via GUI
Naast het installeren via terminal kan je ook opteren om een programma te gebruiken met grafische
interface dat je code zal uitvoeren en compileren. Dit is vooral handig voor mensen die niet vertrouwd zijn
of schrik hebben om de opdrachtprompt te gebruiken. Er zijn zowel gratis als betalende programma’s
voor de verschillende platformen.
 Gratis
o Mixture (OSX) http://mixture.io/
o Scout (OSX, Windows, Linux) https://mhs.github.io/scout-app/
o Koala (OSX, Windows, Linux) http://koala-app.com/
 Betalend
o CodeKit (OSX) https://incident57.com/codekit/
o Compass (OSX, Windows, Linux) http://compass-style.org/
o Prepos (OSX, Windows, Linux) https://prepros.io/
Figuur 8: Mixture
Figuur 9: Scout
Figuur 10: Koala
Figuur 11: CodeKit
Figuur 12: Compass
Figuur 13: Prepos
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
25
3.5 Stel een watcher in op je SASS file
Nu we klaar zijn met de installatie, moeten we aan SASS vertellen op welke files er een watcher moet
geplaatst worden. Dit wil zeggen, wanneer we bezig zijn met het editeren van een stylesheet, willen we
dat SASS de .scss file in het oog houdt en deze omzet naar leesbare taal .css taal voor onze browser elke
keer dat we een aanpassing doorvoeren. Dit kan via de terminal of via de genoemde programma’s in
hoofdstuk 3.4 ‘Alternatief: installatie via de GUI’.
Laten we eerst beginnen met de terminal optie toe te lichten. Het commando zal aan SASS zeggen om
een bepaalde .scss file in het oog te houden en deze om te zetten naar een .css file
Voorbeeld:
$ sass –watch style.scss:style.css
Wanneer we bovenstaand commando gaan uitvoeren, zal SASS automatisch elke verandering in het
bestand style.scss in het oog houden. Wanneer je op enter drukt zie je volgende boodschap verschijnen.
>>>> Sass is watching for changes. Press Ctrl-C to stop
Wanneer er een verandering wordt gedaan zal Sass automatisch style.css overschrijven. Met andere
woorden, elke keer dat het bestand wordt opgeslagen zal de CSS file worden geüpdatet.
Ook hoeven de bestandsnamen van beide files niet exact hetzelfde te zijn.
$ sass –watch style.scss:screen.css
Bovenstaand voorbeeld zou ook werken maar wordt niet aangeraden omdat dit verwarrend kan zijn.
Figuur 14: Logische mappenstructuur voor SASS files
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
26
Bachelorproef Sam Bauters
3.6 Organiseren van SASS bestanden
Figuur 14 toont een typische opstelling met een stylesheet map die een SASS gegenereerd .css bestand
bevat en een sass map die alle .scss bestanden bevat waarmee je aan het werken bent. Je kan er ook
voor kiezen om een watcher te plaatsen op de volledige map in plaats van op 1 enkele stylesheet. Met de
opstelling uit figuur 14 kan ik volgend watcher commando gebruiken om elke verandering in mijn project
met betrekking tot de .scss bestanden automatisch te compileren naar .css bestanden.
$sass –watch stylesheets/sass:stylesheets
3.7 Alternatief op command line: Scout
Zoals ik aangaf in hoofdstuk 3.4 ‘Alternatief: installatie via GUI’ is Scout een gratis programma gebouwd
op Adobe Air dat kan gedownload worden via: http://mhs.github.io/scout-app/
Wanneer u de applicatie opent zal u links onderaan een + icon zien staan dat je zal toestaan een project
toe te voegen.
Figuur 15: scout GUI
Figuur: 16: Scout project toevoegen
Zoals je kan zien, zijn er verschillende parameters die u kan invullen zoals stylesheet, javascript en
afbeelding mappen. Je kan ook een specifiek configuratiebestand voor de SASS compilatie instellen. We
kijken even verder tot bij het veld ‘Output modes’, wanneer je de standaardoptie ‘Development’ laat
staan, zal je geoptimaliseerde en leesbare code terugkrijgen maar er zal geen minificatie worden
toegepast. Naast Development kan je ook nog kiezen voor ‘compressed’ en ‘minified’.
In deze demo gaan we enkel gebruik maken van de eerste 2 velden ‘Input folder’ en ‘Output folder’.
Wanneer de velden zijn ingevuld kan je op de ‘play button’ naast de projectnaam drukken om de watcher
te starten.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
27
Figuur 16: Scout houdt het project in het oog
De watcher is nu ingesteld en klaar voor gebruik! Wanneer men nu een .scss file gaat aanpassen, zal scout
deze compileren naar leesbare .css voor onze browser. Wanneer er syntax fouten zouden te vinden zijn in
de te compileren code, zal de gebruiker onmiddelijk hierover worden geïnformeerd.
Figuur 17: compilatie fout in scout
3.8 Problemen met Scout
Scout is een gratis programma dat momenteel aan versie 0.7.1 zit, dit wil zeggen dat het programma nog
in een ontwikkelingsfase zit en er hier en daar nog enkele bugs kunnen optreden.
Enkele problemen die je kan afleiden uit hun GitHub repository
 Scout kan nogal traag en schokkerig zijn op Windows, ook zijn er personen die last hebben met
het compileren van grote bestanden.
 Het blijkt dat sommige installaties die al Ruby en SASS hebben geïnstalleerd een willekeurige
‘output mode’ krijgen toegewezen. Dit kan verholpen worden door het verwijderen van Scout,
Ruby en SASS. Wanneer je dan Scout opnieuw installeert, zouden de problemen moeten
verholpen zijn.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
28
3.9 Automatiseren van de workflow
3.9.1 Yeoman
Zoals Scout zijn er meerdere gratis programma’s die het mogelijk maken om je frontend development te
vergemakkelijken. Yeoman is er 1 van, deze tool doet meer dan enkel het compileren van de SASS
bestanden. Het is een systeem waarmee je je afbeeldingen kan optimaliseren, de browser automatisch
ververst en ga zo maar verder.
Yeoman is een scafollding tool en helpt bij het snel opstarten van een nieuw project. Het ondersteunt
meerdere tools om zo productief mogelijk te zijn. Bij Yeoman heb je ook de keuze tussen verschillende
generators beter gekend als ‘boiler-plates’. Dit kan gaan over een Bootstrap webapplicatie, maar
bijvoorbeeld ook over een Angular project. Generators zijn plug-ins die moeten worden geïnstalleerd aan
de hand van 1 enkel commando.
Yeoman heeft speciaal voor developers zijn eigen structuur ontwikkeld. Zo kan men nog sneller
webapplicaties bouwen zonder dat er manueel nog iets moet worden bijgevoegd. Dit zijn bijvoorbeeld de
set-ups voor Grunt en Bower die al zijn voorgeprogrammeerd zitten in de generators van Yeoman.
De meeste projecten van Yeoman zijn schaalbaar, ze kunnen zowel voor grote als kleine projecten
worden gebruikt. Net zoals Grunt en Bower, is Yeoman een opensource project. Dit zorgt ervoor dat je je
eigen generators kan aanmaken en dat er heel wat informatie over te vinden is.
Figuur 18: Yeoman workflow
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
29
3.9.2 Installeren van Yeoman
Yeoman kan worden geïnstalleerd met npm. Yo, brower en grunt-cli kan met behulp van volgend
commando geïnstalleerd worden.
npm install –g yo grunt-cli bower
Wanneer de installatie voltooid is, kan de eerste generator geïnstalleerd worden. De standaard generator
is een web applicatie die HTML5 en bootstrap bevat.
Npm install –g generator-webapp
Nadat u de generator hebt geïnstalleerd, kan je starten met een nieuw project aan te maken. Eerst en
vooral maken we een nieuwe map aan op een locatie naar keuze en veranderen we in de terminal het
pad naar deze map. Nu kan je het Yo commando uitvoeren die een lijst zal weergeven van de reeds
geïnstalleerde generators.
Mkdir yeoman-demo
cd yeoman-demo
Yo webapp
Figuur 19: Yeoman commando interface
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
30
Bachelorproef Sam Bauters
3.10 Data Types
Een datatype, ook wel gegevenstype genoemd, is een soort informatie die vereist is voor elk data object.
De volgende tabel toont de verschillende data types die kunnen gebruikt worden in SASS
1
2
3
4
5
6
7
Data Type
Numbers
Representeert de integer types
Strings
Opeenvolging van karakters tussen
aanhalingstekens
Colors
Definiëren van kleuren
Booleans
Dit geeft waar of onwaar terug (True & False)
Nulls
Dit geeft geen waarde terug,
Wanneer iets niet is ingevuld
Space and Comma
Geeft waarden weer die gescheiden worden
door spaties en komma’s
Mapping
Mapt de ene waarde in de andere waarde.
Geeft de flow weer in het overbrengen van
data van de bron naar het target
Voorbeeld
4, 15.5
‘SASS Demo’,
“SASS Demo”
Yellow, #FDFDFD,
rgb(35,255,200)
5 < 2 is false
If(waarde==null)
{…}
2px solid #DFDFDF, 2 2 2 2px
Key: waarde1,
Key2: waarde2
3.10.1 Strings
String zijn een opeenvolging van karakters die worden weergegeven tussen enkele of dubbele
aanhalingstekens en kunnen worden gebruikt als tussenvoegsel met het gebruik van #{ }
Voorbeeld
Index.html
<html>
<head>
<title>Strings</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div class="container">
<h2>Voorbeeld gebruik van Strings</h2>
<p class="SassStrings">Dit is een voorbeeld hoe je Strings gebruikt binnen SASS.</p>
</div>
</body>
</html>
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
31
Style.scss
$name: "SassStrings";
p.#{$name} {
color: blue;
}
Wanneer we op bovenstaand bestand een watcher plaatsen, wordt het bestand gecompileerd naar een
gewone CSS file.
Sass –watch C:\sassdemo\sass\style.scss:style.css
Style.css
p.SassStrings {
color: blue;
}
3.11 Commentaar in SASS
Net zoals in andere programmeertalen kan je in SASS enkele of meerdere lijnen code schrijven. Om een
enkele lijn commentaar te schrijven kan je gebruiken van de prefix //, wil je gebruik maken van meerdere
lijnen commentaar dan kan je opteren om /* */ te gebruiken.
Voorbeeld
// This is Single line comment
/* This is a
Multi line comment */
Wanneer het SASS bestand wordt gecompileerd, zal de commentaar met meerdere lijnen behouden
worden, de commentaar op een enkele lijn zal worden verwijderd.
Figuur 20: Commentaar in SASS
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
32
3.12 Interpolatie
Wanneer je dynamisch selectoren of eigenschappen wil opbouwen, dan is interpolatie hetgeen je nodig
hebt! Dit kan handig zijn wanneer je een herhaling (loop) wil gebruiken om een stijl te genereren.
Bijvoorbeeld wanneer je een array hebt met namen van iconen. In onderstaand voorbeeld plaatsen we
een waarde bijgehouden in een variabele in een klassenaam.
Voorbeeld SASS
$innerContainerClass: container;
.left .#{$innerContainerClass} {
width:75%;
display:inline-block;
}
Omgezet naar CSS
.left .container{
width:75%;
display:inline-block;
}
4
LESS
Less is een preprocessors dat werd gecreëerd door Alexis Sellier. Net zoals in SASS compileert LESS de
code naar een gewone CSS syntax. LESS is open source, dit wil zeggen dat iedereen naast gebruiker ook
developer kan zijn voor de preprocessors. Bij het ontstaan van de preprocessors werd eerst zoals in SASS
gebruik gemaakt van Ruby, echter zijn ze in verdere versies hiervan afgestapt en werd de code
herschreven in JavaScript. Merk op dat gevalideerde CSS code ook gevalideerde LESS code is. Zoals je
zag in de vorige hoofdstukken heeft LESS min of meer dezelfde kenmerken als SASS zoals variabelen,
nesting, operatoren, mixins en functies.
Figuur: 21: LESS
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
33
4.1 Client-Side variatie
Om de client-side variatie van LESS te gebruiken moet je de client-side compiler less.js downloaden. Deze
kan je verkrijgen op http://lesscss.org/2.5.3/dist/less.min.js. Wanneer je klaar bent met het downloaden,
kopieer dan het bestand in je werkmap. Hieronder een codevoorbeeld met de less compiler.
HTML opmaak
<html>
<head>
<title>Less voorbeeld</title>
<link type="text/css" rel="stylesheet/less" href="style.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<p class="lesscode">Mijn eerste less code</p>
</body>
</html>
LESS code in style.less
.impElement{
background:lightgrey;
padding:10px;
border-radius:10px;
}
In bovenstaand voorbeeld hebben we less.js gelinkt met behulp van een content delivery network (CDN).
Om deze code uit te voeren heb je een webserver nodig, anders zal less.js niet laten. Wanneer je het
voorbeeld wil uitvoeren zonder webserver, dan moet je LESS lokaal downloaden.
Figuur 22: LESS in PHPSTORM
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
34
4.2 Server-Side Variatie
De client-side variatie is goed om te ontwikkelen en te debuggen. Echter, wanneer je het gaat gebruiken
voor productie, is het aangeraden om gebruik te maken van de server-side variatie. Met andere woorden
wanneer je de LESS code gaat omzetten naar browser vriendelijke CSS. Dit kan worden geïnstalleerd door
gebruik te maken van de node package manager. In het volgende hoofdstuk staat beschreven hoe je
NodeJS kan installeren. Wanneer je klaar bent met het installeren van Node.js, ben je klaar om de lessc
compiler te installeren.
Commando om de lessc compiler te installeren
npm install –g less
Test om te kijken of de lessc geïnstalleerd is
Lessc –v
Dit commando gaat kijken welke versie van lessc werd geïnstalleerd. Nu dat de lessc compiler is
geïnstalleerd kunnen we verder met het compileren van de LESS bestanden.
4.2.1 Compileren van een LESS bestand
Je kan een less bestand compileren door volgend commando aan te roepen.
lessc styles.less
Dit commando zorgt er voor dat dat de uitvoer in de terminal wordt getoond. Als je wenst om de uitvoer
in een .css file op te slaan, moet je commando aanpassen door een 2de paramater toe te voegen
gescheiden door een spatie.
lessc style.less style.css
De lessc compiler kan worden aangeroepen met toevoeging van meerdere opties zoals:
lessc –h
-h zorgt er voor om de help op te roepen.
lessc –include-path=framework/;lib/
--include zorgt voor de toevoeging van het pad waar LESS de imports kan vinden.
lessc –l style.less
--Linten van de LESS code met de less compiler
Daarnaast zijn er nog meerdere opties beschikbaar om te gebruiken tijdens het gebruik maken van de
lessc compiler. Deze kan je vinden in de LESS documentatie:
http://lesscss.org/usage/index.html#commandline-usage-command-line-usage
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
35
4.3 Node.JS
Node.JS is een softwareplatform voor het maken van webapplicaties die realtime werken en makkelijk uit
te breiden zijn. Ryan Dahl begon met het ontwikkelen van Node.JS in 2009. Hij had als doel dat push
notificaties, zoals veel gebruikt bij mobiele apparaten, ook op websites makkelijk geïmplementeerd
konden worden. Node.JS is gebouwd op de V8 Javascript Engine. V8 is geschreven in C++ en is bedoeld
voor applicaties in de browser en voor standalone applicaties. Voorbeelden van applicaties gebouwd op
V8 zijn de browsers Chrome en Chromium. De Javascript Engine compileert Javascript naar machine
code voordat de code wordt uitgevoerd. De V8 Javascript Engine is een open source project van Google.
Node.JS kan gedownload worden via: https://nodejs.org/en/
Figuur 23: Node.JS website
4.3.1 NPM
Node Packaged Modules (npm) is een module manager voor Node.JS. Met npm kunnen extra modules
worden geïnstalleerd. Npm is te besturen via de console en er zijn een aantal commando’s, bijvoorbeeld
een commando om een module te installeren of een commando om alle geïnstalleerde modules te
bekijken. Ook kunnen modules worden geüpdatet met een commando.
http://npmjs.org/ is de website van npm. Op deze website kan je alle modules uitgebracht voor Node.JS
terugvinden. Per module is door de developer aangegeven wat de module biedt. Daarnaast laat de npm
website zien waar de source code te downloaden is, welke release notes er zijn en zijn er commando’s
beschikbaar om de module te installeren of te updaten.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
36
Om een module te installeren dient npm geïnstalleerd te zijn op de server waar Node.JS applicatie draait.
Npm wordt standaard geleverd bij Node.JS en wordt tijdens de installatie van Node.JS geïnstalleerd. Het
commando om een module te installeren is “npm install [naam van de module]”. De naam van de
module kan via de npm website worden gevonden. Om bijvoorbeeld de module van less te installeren
moet het commando “npm install less” worden uitgevoerd. Na het uitvoeren wordt de module less
geinstalleerd. Om de module less te updaten kan de commando “npm update less” worden gebruikt.
Figuur 24: NPM
4.4 Comprimeren en minimaliseren van CSS
Na het compileren verkrijg je schone en leesbare CSS code. Wanneer je overgaat van development naar
production, moet de code gecomprimeerd en geminimaliseerd worden om zo de laadsnelheid van de
pagina te optimaliseren en bandbreedte te besparen, wat voor mobiele gebruikers heilig is. De
basisstappen voor het comprimeren en minimaliseren van CSS code is het verwijderen van
commentaarlijnen, spaties en andere irrelevante code. De code die je dan te zien krijgt is zeer moeilijk
leesbaar voor de developer, maar dit maakt niet uit omdat je de LESS code kan veranderen om de CSS
aan te passen.
De Less command-line compiler heeft 2 opties om compressie en minimalisering uit te voeren. De eerste
optie is de YUI CSS compressors die je kan vinden via http://yui.github.io/yuicompressor/ De 2de optie is
om gebruik te maken van clean-css die je kan vinden op https://github.com/less/less-plugin-clean-css .
Je kan beide opties niet tegelijkertijd gebruiken. Sinds kort wordt clean-css beschouwd al het snelst van
de twee. Wanneer we bijvoorbeeld een file zouden comprimeren van 4.3kb, met clean-css krijgen we een
compressie tot 3.520kb en bij YUI CSS krijgen we een compressie van 3.542kb. Sinds LESS versie 1.5.0
werd clean-css gekozen als standaardoptie.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
37
Bachelorproef Sam Bauters
4.5 Alternatief: Grafische User Interface
Net zoals in SASS opteren sommigen om een GUI te gebruiken in plaats van commando’s. Er zijn
verschillende GUIs beschikbaar voor de verschillende platformen om je LESS code aan te passen en te
compileren. Ook de applicaties uit hoofdstuk 3.4, CodeKit, Mixture, Koala Compass en Scout, kunnen
gebruikt worden om LESS te compileren.
 SimpLESS (http://wearekiss.com/simpless)
 Cross-platform editor en compiler met meerdere functies zoals foutnotificatie,
automatisch compileren en minimaliseren van je CSS files.
 Crunch (https://getcrunch.co/)
 Crunch is een cross-platform Adobe Air applicatie. Ondersteund de volledige LESS syntax
Figuur 25: SimpLESS
Figuur 26: Crunch
Wanneer je op het punt staat om een GUI voor LESS te kiezen, vergeet dan zeker niet om na te kijken
welke less.js versie de applicatie gebruikt. Sommige GUI’s zijn gemaakt op oudere versies van less.js en
ondersteunen niet de laatste nieuwe features.
Voor web ontwikkelaars die gebruik maken van Visual Studio wordt Web Essentials aanbevolen. Web
Essentials breidt Visual Studio uit met een heleboel nieuwe features met onder andere LESS. Ook andere
IDEs zoals PHPStorm en Webstorm hebben ingebouwde LESS compilers.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
38
4.6 Commentaar in LESS
Commentaar maakt je code duidelijk en leesbaar voor anderen. Het is belangrijk dat je de code duidelijk
begrijpt.
In Less kan je commentaar toevoegen op dezelfde manier als dat je dat doet in gewone CSS code, om
meerdere lijnen commentaar achter elkaar te schrijven kan je gebruik maken van /* */ en voor een enkele
lijn commentaar kan je de lijn starten met //.
4.6.1 Geneste commentaar
Alhoewel Less, zoals PHP of javascript niet toelaat om geneste commentaar te schrijven is single
commentaar dat start met // wel toegelaten en dat kan dan weer genest worden met een normale
commentaar syntax. Hieronder een voorbeeld.
/*
//Commentaar
*/
4.6.2 Speciale commentaar
Normaal gezien wordt bij het minimaliseren van de code alle commentaar verwijderd uit het bestand,
maar soms is het verplicht om belangrijke commentaar zoals een licentie of auteursrechten
mededelingen toe te voegen in het geminimaliseerd bestand. Bij het gebruik van de standaard minimizer
clean-css kan je gebruik van /*! !*/ zoals getoond in onderstaand voorbeeld.
/*!
Heel belangrijk bericht
!*/
4.7 Lazy loading
Lazy loading wil zeggen dat het object pas geïnitialiseerd wordt op het moment dat het wordt gebruikt.
Lazy loading is het tegenovergesteld van eager loading. Voor LESS betekent dit dat bijvoorbeeld
variabelen niet moeten worden gedeclareerd voor ze worden gebruikt.
.voorbeeld {
margin-left: @marginleft;
}
@marginleft: 15px;
Dit wordt gecompileerd naar de volgende code:
.voorbeeld {
margin-left: 15px;
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
39
4.8 Ingebouwde functies
Less voorziet meerdere ingebouwde functies. Een ingebouwde functie kan worden gebruikt om less
waarden te gaan manipuleren binnenin mixins. Ook kunnen ze worden gebruikt als guard expressions. De
volledige lijst met functies kan je terug vinden op http://lesscss.org/functions/
4.8.1 Javascript
Less functies worden gemapt uit Javascript functies en code. Dit komt omdat zoals eerder aangegeven
LESS geschreven werd in Javascript. Wanneer je Javascript code gaat gebruiken in LESS moet deze
tussen aanhalingstekens worden geplaatst zoals aangetoond in volgend voorbeeld.
@max: ~”´Math.max(10,450) + ‘px’`”;
.container{
width: @max;
}
Deze Less code die nu een Javascript code bevat, zal gecompileerd worden naar volgende CSS code:
.container {
width: 450px;
}
Ook al is het mogelijk om Javascript code te schrijven binnen Less, wordt er toch sterk aanbevolen om dit
niet te gebruiken. Dit komt omdat Less compilers die geschreven worden in andere talen de code niet
kunnen verwerken. Dit wil zeggen dat je code veel moeilijker is om te onderhouden.
Wanneer er geen ingebouwde less functie beschikbaar is voor uw doel, probeer dan om het equivalent
daarvan te schrijven in Less code. Sinds versie 1.6 is er een max() function en zou je volgende
implementatie kunnen gebruiken.
.max(@a,@b) when (@a>=@b){@max:@a;}
.max(@a,@b) when (@b>@a){@max:@b;}
In het algemeen kunnen we stellen dat je beter uitkijkt wanneer je Javascript functies wil gebruiken in de
Less code. Ook waarden zoals document.body.width slaan nergens op in je gecompileerd CSS.
4.8.2 List Functies
Extract() en length() zijn functies om de waarden en de lengte te verkrijgen van een CSV lijst. Samen
kunnen deze functies gebruikt worden om herhalingen zoals in een array uit te voeren over een CSV lijst.
In volgend voorbeeld maak ik gebruik van Font Awesome. Font Awesome is een lettertype dat gebruik
maakt van schaalbare vector iconen die kunnen worden gebruikt in CSS. Die kunnen dan makkelijk
vergroot of verkleind worden, zelfs een andere kleur is mogelijk. Meer informatie over Font Awesome kan
je vinden op http://fontawesome.io/
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
40
Figuur: 27: Font Awesome
Om Font Awesome te gebruiken kan je de volgende lijn code toevoegen in de head van je HTML file. We
gebruiken hiervoor een CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
In je HTML file kan je nu volgende code gebruiken:
<i class="fa fa-check"></i> fa-Check
Met deze informatie over Font Awesome kan je nu een loop maken die iconen toevoegt aan een lijst met
items in je navigatie.
@icons: "\f293","\f294","\f295","\f296","\f297","\f298";
.add-icons-to-list(@i) when (@i > 0) {
.add-icons-to-list((@i - 1));
@icon_: e(extract(@icons, @i));
li:nth-child(@{i}):before {
font-family:'FontAwesome';
content: "@{icon_}\00a0";
}
}
.add-icons-to-list(length(@icons));
De lijn @icon_: e(extract(@icons, @i)); is een string functie en is het equivalent van een escaping ~””.
Merk ook volgend statement op content: "@{icon_}\00a0"; \00a0 zorgt er voor dat er een extra spatie
wordt geplaatst om zo het icoon en de link te scheiden.
4.8.3 Kleur functies
De kleurenfuncties van LESS kunnen worden opgesplitst in kleurenkanalen, blending, kanaal manipulatie
en operations.
Kleuren worden gedefinieerd in kleurenruimtes. Een RGB kleur heeft 3 kanalen: rood, groen en blauw. In
CSS2 wordt gebruik gemaakt van de RGB ruimte. In CSS3 kan er gebruik gemaakt worden van nieuwe
bepalingen zoals HSL en HSV, dit zijn transformaties van RGB waarden. De CSS3 kleurinstellingen zijn
gebruiksvriendelijker, bijvoorbeeld bij HSL wordt er ook gebruik gemaakt van 3 kanalen, die zijn hue,
saturation en lightness. Less heeft ingebouwde functies die toelaten om de kanalen van verschillende
kleurtypes te manipuleren. Sinds CSS3 kan je hexadecimale kleurwaardes gebruiken , RGB kleuren, RGBA
kleuren (Dit zijn kleuren met een alpha kanaal voor de opacity), HSL kleuren, HSLA (De A is staat ook voor
opacity). Natuurlijk is het ook toegelaten om de standaard voor gedefinieerde cross-browser kleuren te
gebruiken.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
41
De gecompileerde kleurwaarden van de LESS kleurdefinities zijn niet altijd gedefinieerd als een
hexadecimale kleur in CSS code. Zie onderstaand voorbeeld
.selector {
color1: rgb(38,120,30);
color2: rgba(45,112,30,50%);
color3: hsl(25, 100%, 50%);
}
Deze LESS code wordt gecompileerd naar volgende CSS code:
.selector {
color1: #26781E;
color2: rgba(45, 112, 30, 0.5);
color3: #FF6A00;
}
Kleur is een basisdeel als het gaat om het ontwerpen en stijlen van je website. Kleurfuncties kunnen je
helpen om een dynamisch kleurenpalet te ontwerpen. Ze worden dan gebruik om bijvoorbeeld voor te
zorgen dat de randkleur iets donkerder is dan de achtergrondkleur, om te zorgen voor contrast.
Figuur 28: HSL & HSV
4.9 LESS gebruiken in frameworks
Je kan LESS combineren met andere gekende frameworks. In dit gedeelte bekijken we hoe je de volgende
frameworks kan uitbreiden met LESS.
 Cardinal CSS
 Ionic framework
 Semantic grid system
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
42
4.9.1 Cardinal CSS
Figuur: 29: Cardinal
Cardinal CSS is een framework dat vergelijkbaar is met Bootstrap. Het is puur een CSS framework dat
modulair en responsive is. Cardinal CSS gebruikt geen enkele javascript plugin zoals dat bij Bootstrap of
Foundation wel het geval is. Cardinal CSS is geschreven met behulp van LESS. Hoewel het een goed
framework is, is er nog veel werk aan de documentatie, die is namelijk gering.
Een voorbeeld van de HTML opmaak
<div class="grid">
<div class="grid-item 1/4">Block 1</div>
<div class="grid-item 1/4">Block 2</div>
<div class="grid-item 1/4">Block 3</div>
<div class="grid-item 1/4">Block 4</div>
</div>
Cardinal ondersteunt 6 grids systemen:
 xs: 480px;
 sm: 600px;
 md: 768px;
 lg: 960px;
 xl: 1140px;
 xxl: 1380px;
 xs: 480px;
De LESS Cardinal plugin zal de Cardinal code uitvoeren voor je eigen gemaakte stijl. Deze plugin kan
worden geïnstalleerd door volgend commando:
npm install –g less-plugin-cardinal
Na de installatie, kan de plugin gebruikt worden
Npm install cardinal.less –cardinal
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
43
4.9.2 Ionic
Figuur 30: Ionic
Het Ionic framework wordt gebruikt voor het bouwen van een mobiele hybride applicatie, dit zijn web
applicaties die worden uitgevoerd als native applicaties. Omdat deze applicaties worden bestaan uit web
pagina’s kunnen ze worden gemaakt in HTML, javascript en CSS. Ionic applicaties worden gebouwd in
HTML5. De LESS plugin is beschikbaar op https://github.com/bassjobsen/less-plugin-ionic . Dit
importeert het Ionic Framework voor je zelf geschreven Less code zoals ook eerder aangehaald bij
Cardinal. Nadat de plugin is geïnstalleerd kan je gemakkelijk je code compileren met volgend commando
Lessc lessapplication.less lessapplication.css –ionic
De plugin kan worden geïnstalleerd met volgend commando
npm install –g less-plugin-ionic
4.9.3 Semantic Grid System
Figuur 31: Semantic Grid System
Het Semantic Grid System is een moderne en schone oplossing met als doel het bouwen van een
responsieve layout zonder niet semantische klasses in de opmaak. Je stelt simpel de column en gutter
widths in, het aan kolommen en dan heb je keuze tussen pixels of percentages. Het systeem werd
grotendeels gemaakt met LESS maar geeft ook ondersteuning aan SCSS. Hieronder een voorbeeld
@import 'grid.less';
@columns: 10;
@column-width: 50;
@gutter-width: 10;
@total-width: 100%;
.main {
.column(8);
}
.sidebar {
.column(2);
}
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
5
44
Stappenplan SASS of LESS
5.1 Installatie
Zoals eerder aangehaald in dit document zijn SASS en LESS gebouwd op verschillende platformen. SASS
is gebouwd met Ruby terwijl LESS draait op de Javascript library.
SASS
Om SASS te kunnen gebruiken moet Ruby worden geïnstalleerd, op MAC staat dit standaard geïnstalleerd
maar op Windows ben je verplicht om eerst de Ruby compiler te installeren vooraleer je SASS aan de
praat krijgt. Dit kan door het gebruik van de terminal of met behulp van een GUI.
LESS
LESS is gebouwd op Javascript wat wil zeggen dat het heel simpel is om LESS te installeren, je hoeft enkel
in je HTML bestand de link te leggen met de less.js javascript library. Ook voor LESS zijn er verschillende
GUI applicaties beschikbaar om je code naar CSS te compileren.
Conclusie
LESS krijgt hier de voorkeur op SASS omdat je onmiddellijk aan de slag kan met het ontwikkelen van je
applicatie.
5.2 Taal
Elke preprocessor heeft zijn eigen zijn eigen taal en heeft grotendeels gemeenschappelijke onderdelen
zoals variabelen. SASS definieert zijn variabelen met het $ teken terwijl LESS dit doet met het @ teken.
Wanneer je beide preprocessors gaat vergelijken valt er op dat SASS het meest aanleunt bij
programmeren. De preprocessor maakt gebruik van if/else voorwaarden en lussen.
Wanneer je vertrouwd bent met programmeertalen zoals Ruby en Javascript kan je dit makkelijk
integreren en overnemen in je stijldocumenten. LESS kan dit grotendeels ook maar deze zijn niet zo
uitgebreid.
Ook laat SASS toe om meer gevarieerde wiskundige bewerkingen uit te voeren, bevat een betere nesting
en dit kan dan weer bijdragen tot een betere organisatie van je stijldocument gebaseerd op het DRY
principe.
Conclusie
SASS neemt hier duidelijk de bovenhand, je hebt meer features en mogelijkheden tot je beschikking.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
45
5.3 Documentatie
Documentatie is van zeer groot belang bij elke preprocessor. Zonder deze documentatie zou het zo goed
als onmogelijk zijn om iets werkend te krijgen.
Wanneer we surfen naar de website van SASS (http://sass-lang.com/) en doorklikken naar de
documentatie pagina, krijgen we een ellenlange pagina met zeer veel informatie te zien die doet denken
aan de online encyclopedie Wikpedia. Dit geeft de gebruiker geen motivatie om het document grondig
door te nemen.
Figuur 32: SASS Documentatie
De documentatie die je terugvindt op de website van LESS (http://lesscss.org/features/) is overzichtelijker
en duidelijker te gebruiken, ook gaat de documentatie meteen over tot de essentie: voorbeelden. Dit zet
de gebruiker aan om aan de slag te gaan met LESS.
Figuur 33: LESS Documentatie
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
46
Conclusie
De documentatie van LESS is net iets overzichtelijker en duidelijker dan die SASS, ook al is deze meer
uitgebreid, daarom krijgt LESS hier de voorkeur.
5.4 Extensies
Compass is een open-source CSS Authoring Framework die je kunt gebruiken bovenop SASS. Hierbij heb
je extra mixins met CSS3 support zoals border-radius, box-shadow, box-sizing, en opacity maar ook
features zoals Helpers, Lay-out, Typografie en Grid lay-out. Kortom, Compass is een perfecte match met
SASS. Deze extensie wordt onder andere gebruikt door het sociale netwerk LinkedIn
(https://www.linkedin.com/).
LESS heeft ook meerdere extensies ter beschikking maar die zijn niet gecombineerd in 1 enkele extensie
zoals dat bij Compass wel het geval is. Voor beginnende ontwikkelaars kan dit een struikelblok vormen
omdat dit meer tijd in beslag zal nemen doordat je meerdere extensies moet onderzoeken.
Dit zijn enkele extensies die je kan gebruiken voor LESS:
 CSS3 Mixins
o Preboot (http://markdotto.com/bootstrap/)
o LESS Elements (http://lesselements.com/)
o LESS Mixins (https://github.com/tophermade/LESS-Mixins)
 Grid
o Frameless (https://github.com/jonikorpi/Frameless)
o Semantic.gs (http://semantic.gs/)
o 960.gs (https://github.com/adrianlee44/960gs.less)
 Lay-out
o Even.less (https://github.com/bisrael/even.less)
5.5 Fout afhandeling
Error notificaties zijn zeer belangrijk zodat je snel op de hoogte bent van wat er misloopt. Wanneer je aan
het werken bent aan een groot project met duizenden lijnen code, is het een must om een overzichtelijke
en duidelijke foutmelding te verkrijgen.
SASS
In onderstaand voorbeeld waar op lijn 6 een puntkomma werd vergeten, zie je een foutmelding
gegenereerd door SASS. Wanneer je de error nader bekijkt is deze nogal omslachtig en moeilijk te
begrijpen.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
47
Bachelorproef Sam Bauters
figuur 34: SASS foutmelding
LESS
Wanneer we dezelfde error oproepen bij LESS, zien we dat deze beter wordt weergegeven en dat deze
ook accurater lijkt zoals je ziet in onderstaande screenshot.
figuur 35: LESS foutmelding
5.6 Overzicht SASS vs LESS
Website
Jaar van publicatie
Oprichter(s)
Licentie
Versie
Laatste datum van publicatie
Sterren op Github
Populaire frameworks
SASS
http://sass-lang.com/
2007
Hampton Catlin, Natalie
Weizenbaum, and Chris
Eppstein
MIT
3.4.21
11 januari 2016
7687
Compass, Bourbon, Gumby
LESS
http://lesscss.org/
2009
Alexis Sellier
MIT
2.5.3
25 september 2015
13415
LESS Elements, LESSHat, 3L
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
48
5.7 Conclusie
Uit deze paper kan je concluderen dat beide preprocessors veel met elkaar gemeen hebben en dat SASS
een lichte voorkeur krijgt op LESS, wat niet wil zeggen dat LESS slecht een slechte keuze is. Wanneer je
bijvoorbeeld een bepaald frontend framework gebruikt dat gebaseerd is op LESS kan je gerust deze
preprocessor gebruiken.
De instapdrempel van SASS lijkt net iets hoger te liggen dan LESS, maar op lange termijn zal je merken
dat je met SASS de juiste keuze hebt gemaakt.
 SASS bevat een betere syntax
 SASS heeft meer features
 Met SASS kan je ook gebruik maken van het framework Compass
Wat je ook verkiest, zolang je 1 van de vele CSS preprocessors gebruikt, ben je al op de goede weg. Je zal
sneller en efficiënter te werk kunnen gaan en het zal je product naar een hoger niveau tillen.
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
49
Referentielijst
 Arkins, D. (2014, oktober 22). Which CSS Preprocessor Should You Choose? Opgehaald van
logentries: https://blog.logentries.com/2014/10/which-css-preprocessor-should-you-choose/
 Bradford, L. (2015, november 10). Sass vs. Less. Opgehaald van onemonth:
http://learn.onemonth.com/sass-vs-less
 Bradley, S. (2012, april 9). Sass And LESS: An Introduction To CSS Preprocessors. Opgehaald van
vanseodesign: http://vanseodesign.com/css/css-preprocessors/
 chriseppstein. (sd). Sass/Less Comparison. Opgehaald van github:
https://gist.github.com/chriseppstein/674726
 Coyier, C. (2012, mei 16). Sass vs. LESS. Opgehaald van css-tricks: https://css-tricks.com/sass-vsless/
 CSS Preprocessors Compared: Sass vs. LESS. (sd). Opgehaald van hongkiat:
http://www.hongkiat.com/blog/sass-vs-less/
 Dean, M. (2015, oktober 8). less-the-worlds-most-misunderstood-css-pre-processor. Opgehaald van
getcrunch: https://getcrunch.co/2015/10/08/less-the-worlds-most-misunderstood-css-preprocessor/
 FNL. (2015). CSS Preprocessors. Webdesigner, 38-45.
 Getting started | Less.js. (sd). Opgehaald van LESS: http://lesscss.org/
 Hixon, J. (2011, september 9). An introduction to less and comparison to lass. Opgehaald van
smashingmagazine: https://www.smashingmagazine.com/2011/09/an-introduction-to-less-andcomparison-to-sass/
 Jackson, B. (2016, maart 23). CSS Preprocessors – Sass vs LESS. Opgehaald van keycdn:
https://www.keycdn.com/blog/sass-vs-less/
 Koala. (sd). Opgehaald van Koala: http://koala-app.com/
 Less & Sass files. (sd). Opgehaald van getuikit: http://getuikit.com/docs/documentation_lesssass.html
 Luke. (2013, februari 8). LESS VS SASS VS STYLUS. Opgehaald van scottlogic:
http://blog.scottlogic.com/2013/03/08/less-vs-sass-vs-stylus.html
 Paris, C. (2014, januari 6). Less vs. Sass – Which CSS Preprocessor is Best For You? Opgehaald van
udemy: https://blog.udemy.com/less-vs-sass/
 Sam. (2014, januari 6). Less vs Sass? It’s time to switch to Sass. Opgehaald van zingdesign:
http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/
 Sanders, T. (sd). Moet ik SASS of LESS gebruiken? Opgehaald van tomsanders:
http://tomsanders.info/blog/moet-ik-sass-of-less-gebruiken/
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
50
 Sass vs. SCSS: which syntax is better? (sd). Opgehaald van thesassway:
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
 sass-lang. (sd). Opgehaald van CSS with superpowers: http://sass-lang.com/
 Wildermuth, S. (2012, maart 5). A Better CSS: LESS and SASS [Video]. Opgehaald van Pluralsight:
https://app.pluralsight.com/library/courses/better-css/table-of-contents
 Wolkerstorfer, I. (sd). Which is better: Less, Compass or Sass? Opgehaald van quora:
https://www.quora.com/Which-is-better-Less-Compass-or-Sass
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?
Bachelorproef Sam Bauters
51
Figuur Referentielijst
 http://www.joomlavision.com/understand-a-power-of-sass-and-why-you-should-use-csspreprocessors/
 http://rootwork.org/blog/2013/05/ninjas-your-code-drupalcon-portland-sass-extendsplaceholders
 https://www.ostraining.com/blog/coding/compiling-tools/
 Figuur 4: HTTP://rootwork.org/blog/2013/05/NINJAS-YOUR-CODE-DRUPALCON-PORTLAND-SASSEXTENDS-PLACEHOLDERS
 Figuur 8: Mixture (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 9: Scout (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 10: Koala (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 11: CodeKit (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 12: Compass (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 13: Prepos (bron : https://www.ostraining.com/blog/coding/compiling-tools/)
 Figuur 18: Yeoman http://blog.bingo929.com/wp-content/uploads/2014/03/yeoman-bannerwide.jpg
 Figuur 19: https://robots.thoughtbot.com/getting-started-with-sass-bourbon-and-neat-withyeoman
 Figuur 24: NPM: https://www.supnig.com/media/pictures/npmnodejs.jpg
in welke webtoepassingen wordt het noodzakelijk om sass of less te integreren?