Waarom je Sass moet gebruiken | Het Nieuwe Web

Waarom je Sass moet gebruiken

Efficiënt een webpagina stijlen? Ik gebruik geen CSS meer. Nadat ik een aantal keer Sass gebruikt heb, ben ik ervan overtuigd dat het beter werkt dan CSS. Sass is geschikt voor grote applicaties maar ook voor eenvoudige webpagina’s. Ik neem je in deze blog graag mee over front-end development met Sass en waarom het beter is. (De blog zal iets technischer zijn dan reguliere blogs.)

Voordat ik over Sass begin, eerst even ter introductie OOP development. OOP betekent Object Oriented Programming. Ofwel: het ontwikkelen in kleine pakketjes. Stel je een Ikea-kast voor. Je krijgt een aantal planken, schroefjes en plugjes. Dit klik je eenvoudig in elkaar. Zie elk onderdeel van de kast als een object van een bepaald type (schroef, plank, plug). Sommige objecten worden vaker gebruikt, sommige niet. In Sass heten deze objecten modules. Ik kom hier later op terug.

Deze blog gaat over:

 

CSS

Allereerst over de basis van alles: CSS. CSS betekent Cascading Style Sheets. Het is een techniek voor de vormgeving van webpagina’s. CSS wordt om performance redenen altijd in één enkel bestand geschreven. Alle code staat dus onder elkaar. Structuur houden is hierdoor een grote uitdaging. Eigenlijk is dit niet mogelijk… Een gevolg hiervan is dat het onderhouden ook lastig is. Als er elementen van de webpagina verwijderd worden, wordt de CSS vaak vergeten. De reden hiervoor kan zijn dat elementen van elkaar afhankelijk zijn. Het gevaar is groot dat er overbodige code achter blijft. Kunnen we hierin geen structuur aanbrengen?

 

SASS

Jawel, gelukkig bestaat Sass. Sass is een methode, ontwikkeld in 2006 door Hampton Catlin. De Sass syntax is ontwikkeld om grote(re) ingewikkelde stijlbestanden overzichtelijk te houden. Sass is een syntax die op duizend en één manieren gebruikt kan worden. Dit is handig, omdat het zo voor alle projecten geschikt is. Echter is dat ook een grote valkuil. Je gebruikt het snel op een manier zoals het niet bedoeld is… Ik licht in deze blog twee handige features uit: variabelen en structureren van elementen.

Het is mogelijk variabelen te gebruiken voor bijvoorbeeld kleuren. Doordat de kleuren op één plek gedefinieerd zijn weet je zeker dat je overal dezelfde kleuren gebruikt. Als je eens een andere kleur wilt, hoef je dat ook maar op één plek te veranderen!

Sass heeft ook de mogelijkheid om elementen te rangschikken. Bijvoorbeeld een knop met daarin de tekst. Je geeft aan dat de tekst alleen in de button kan voorkomen:

button {

    /*CSS*/

    .button-text {

        /*CSS*/
   }
 
}

SCSS

Bij Het Nieuwe Web gebruiken we de Sass versie SCSS. SCSS is zogezegd een ‘accentje’ van de Sass syntax. Het betekent Sassy CSS. Er zijn vier hoofdredenen waarom wij SCSS gebruiken:

Zoals je ziet is het een grote stap vooruit voor een relatief kleine inspanning. Om verwarring te voorkomen blijf ik in deze blog de techniek Sass noemen.

 

Samenvatting: Waarom Sass?

Waarom gebruikt Het Nieuwe Web Sass?

Ik zet de belangrijkste redenen nog even op een rijtje:

 

Voor de techneuten

Hoe gebruik je Sass?
Aangezien Sass een syntax is die browsers (nog) niet kennen moet het ‘vertaald’ worden naar normale CSS. Dit gaat via een compiler, ofwel: de code moet geassembleerd worden. De compiler roep je aan via een commando in je console. Vervolgens wordt alle Sass in één gecomprimeerd CSS bestand gezet. Dit bestand wordt ingeladen in de webpagina. Het uiteindelijke resultaat is daardoor hetzelfde als bij een normaal CSS bestand.

Zijn er ook minpunten?
Ja, helaas wel. Het gevaar van Sass is dat je de browser ‘vergeet’. Doordat je elementen zo eenvoudig kunt rangschikken moeten met name de browsers op zwakkere devices langer rekenen om de goede stijl op het juiste element toe te passen.

Angular 2
Als laatste een klein zijspoor: Angular is eveneens opgebouwd in modules. Alle HTML-, CSS- en Angular bestanden van dié module staan in dát mapje. Dus als je een module niet meer gebruikt, dan kan het mapje ook weg. Hierdoor blijft je de applicatie schoon en onderhoudbaar. Over Angular hoop ik samen met Pieter nog een blog te maken. Deze houden jullie tegoed.


Lees alle berichten over "Techniek" >