SASS

Websites worden voorzien van een stijl (een visuele schil over de code) met CSSCSS ofwel Cascading Style Sheets, zijn stijldefinities voor een webpagina of webapplicatie. verder lezen. Deze Cascading StyleSheetEen stylesheet is een stijldefinitie voor een webpagina, document of applicatie. verder lezen is een protocol voor een webbrowser om te vertellen hoe een pagina er uit moet zien: welke kleuren, lettertypen en afbeeldingen gehanteerd moeten worden om de pagina er goed uit te laten zien. SASSSASS maakt het mogelijk om met behulp van variabelen kleuren en andere eigenschappen van de pagina vast te leggen. Dit geeft een efficiënte en schone webpagina-stijl. verder lezen is een doorontwikkeling van CSS, bedoeld om meer structuur te geven aan stylesheets.

Omdat pagina’s tegenwoordig uit vele honderden verschillende elementen bestaan, is het voor de programmeur een flinke klus om deze allemaal gericht te stijlen. Er zijn daarom de afgelopen jaren een aantal zogenaamde pre-processors verschenen: een nieuwe manier van CSS code schrijven, met behulp van functies, afkortingen en variabelen. LESS en SASS zijn de bekendste.

Wat is SASS?

SASS staat voor Syntactically Awesome StyleSheets (ja, echt) en is ruim tien jaar geleden ontwikkeld toen browsers achterbleven in de ondersteuning van de nieuwe CSS-specificatie (CSS3). SASS is een CSS preprocessor: via een conversieslag wordt SASS omgezet naar CSS die elke browser begrijpt. Het voegt extra mogelijkheden toe aan CSS, zoals de mogelijheid om stijl-definities hierarchisch in te delen, het gebruik van variabelen, en de toepassing van functies (mixins).

Het gebruik van SASS

Met SASS is het mogelijk om met behulp van variabelen kleuren en andere eigenschappen van de pagina vast te leggen en deze overal in de stylesheet te gebruiken. SASS-bestanden eindigen op .scss in plaats van op .css, maar worden met behulp van zogenaamde compilers vóórdat het in de browser verschijnt omgezet naar native CSS. Een browser kan zelf namelijk alleen overweg met CSS-bestanden; het is enkel tijdens de productiefase een handig hulpmiddel om snel, efficiënte code te schrijven. Meestal wordt een kleur in websites gedefinieerd met een hexadecimale code, zoals #FFFFFF voor wit, #000000 voor zwart en #96be28 voor Ambrero-groen.

Wanneer je op een website met enkel CSS al het groen zou willen vervangen voor bijvoorbeeld rood, dan ben je even bezig. Met variabelen zoals $primary-color: #96be28; in een aparte variables.scss heb je de kleur één keer gedefinieerd en kun je die overal in de SASS-code gebruiken. Met ingebouwde functies als darken($primary-color, 10); kun je de kleur zelfs manipuleren – in dit geval 10% donkerder maken. SASS laat toe zelf complexe functies te schrijven, die hulp bieden bij het definiëren van locaties van lettertypen en afbeeldingen of bijvoorbeeld het responsief maken van een webpagina.

De voordelen van SASS

Hieronder de voordelen op een rij:

• Het geeft overzichtelijke bestanden, met leesbare code
• Wijzigingen in de stijl van een website kunnen snel worden doorgevoerd
• Tijdbesparing door complexe CSS-code achterwege te laten
• Meerdere thema’s voor een website is een stuk eenvoudiger te realiseren
• Een veel betere onderhoudbaarheid voor andere progr