Het belang van Sass voor webdesign
Bjorn Valk | 20 januari 2017
Bjorn Valk | 20 januari 2017
Door Björn Valk | 20 januari 2017
Als front-end developers zijn wij vooral bezig met het opmaken van websites. Lettertypes, kleur, marges, opvulling (padding). Alles moet tot op de pixel nauwkeurig worden vastgelegd om een website er ook exact zo uit te laten zien als wat onze klant wil zien. Om dit te bewerkstelligen, wordt gebruikgemaakt van CSS (Cascading Style Sheet). Voor iedere website of pagina komen soms wel duizenden regels opmaak code aan te pas, waar heel wat tijd in gaat zitten om op te bouwen en te testen. Kan het opbouwen van zo’n stylesheet dan niet sneller of makkelijker? Jazeker wel, met de komst van zogenaamde CSS pre-processors zoals Sass, Less of Stylus.
Sass (Syntactically Awesome StyleSheets) is een scripttaal die CSS uitbreidt. Dit geeft developers de mogelijkheid om code te schrijven in de ene taal en deze vervolgens te compileren (samenvoegen) naar CSS. Sass stelt je in staat om functies te gebruiken zoals variabelen, geneste regels, inline importeren en nog veel meer. Het helpt ook om dingen georganiseerd te houden waardoor je stylesheets sneller kan maken. Een aantal functies zullen hieronder worden uitgelegd.
Sass maakt, net als andere programmeertalen, gebruik van variabelen waarin informatie kan worden opgeslagen die je kunt gebruiken in je stylesheet opslaan. Denk bijvoorbeeld aan een standaard kleur voor alle teksten op een website. Met Sass hoef je de kleurwaarde slechts éénmaal op te slaan in een variabele en vervolgens in de stylesheet voor alle tekstelementen deze variabele in te stellen. Hierdoor kun je jouw kleuren snel veranderen zonder dat je elke regel hoeft te wijzigen.
De functie van het nesten is een zwaard dat aan twee kanten snijdt. Het biedt een uitstekende methode voor het verminderen van de hoeveelheid benodigde coderegels, maar het kan ook leiden tot overgekwalificeerde CSS indien het niet zorgvuldig wordt gebruikt. Het idee achter het nesten is dat, indien correct uitgevoerd, de functie je in staat stelt om de zogenaamde CSS selectors op dezelfde wijze te structureren als de HTML hiërarchie. Hieronder een voorbeeld hoe een basisstijl van een navigatie element er in CSS uit komt te zien met behulp van Sass:
nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	li { display: inline-block; }
	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	display: inline-block;
}
nav a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
}
Partials zijn kleine Sass-bestanden die kunnen worden geïmporteerd in andere Sass-bestanden. Partials zijn in feite korte stukjes code. Met deze code stukjes wordt een CSS-bestand modulair en makkelijker te onderhouden. Een partial als zodanig wordt aangeduid door het bestand te voorzien van een underscore als voorvoegsel: _partial.scss. Op deze manier is het ook mogelijk om de complete stylesheet op te splitsen in kleinere componenten. Bijvoorbeeld: banners, buttons, formuliervelden, standaardwaardes, header, footer, grid, inhoud, home, contact, etc. Om een wijziging uit te voeren op een specifiek element hoef je nu niet meer de duizenden regels in de CSS stylesheet te doorzoeken naar dit element, maar slechts de specifieke partial aan te passen.
De importeerfunctie wordt gebruikt voor partials (zie vorige paragraaf). Met de @import richtlijn kun je gedeeltelijke bestanden importeren in een basisbestand dat uiteindelijk een enkel CSS-bestand opbouwt.
Geen enkele browser interpreteert CSS op dezelfde manier. Daarom maken browsers gebruik van zogenaamde vendor prefixes. Het gebruiken van deze vendor prefixes maakt CSS-code vaak langdradig en complex. Een van de voordelen van preprocessors (zoals Sass) is hun vermogen om complexe, langdradige code te vereenvoudigen. Dit is waar mixins van pas komen. In plaats van voor ieder element dat gebruik maakt van bijvoorbeeld border-radius (voor het rond maken van de rand rondom een element) alle vendor prefixes opnieuw uit te hoeven typen, kun je met Sass een Mixin maken waarin je deze vendor prefixes (-webkit-border-radius, -moz-border-radius, -ms-border-radius, border-radius) zet om vervolgens in elk element enkel de mixin aan te roepen met @include border-radius();
Met de mogelijkheid om berekeningen uit te voeren in CSS kun je nog meer doen, zoals pixel waarden omzetten in percentages. Je hebt toegang tot standaard wiskundige functies zoals optellen, aftrekken, vermenigvuldigen en delen. Natuurlijk kunnen deze functies worden gecombineerd om complexe berekeningen te maken. Bovendien bevat Sass een aantal ingebouwde functies om getallen te manipuleren. Denk daarbij aan functies zoals percentage, floor (afronden naar beneden) en round (afronden naar boven).
Alle bovenstaande functies zijn er om het leven van een front-end developer makkelijker te maken. De tijd die benodigd is om een CSS stylesheet op te bouwen en te beheren, wordt door gebruik te maken van Sass vele malen korter waardoor webdesign projecten veel sneller en leuker wordt.
