SASS en SCSS: wat het is en waarvoor het wordt gebruikt

Voor het opmaken van een webdocument heb je Cascading Style Ssheet, kortweg CSS. Daarmee zeg ik niets nieuws. Het maken van CSS is vrij bewerkelijk, zeker als je rekening moet houden met allerhande vendor-prefixes.

Het ligt dan ook voor de hand dat mensen naar wegen zoeken om het wat eenvoudiger te maken. De oplossing is gevonden in uitbreiding van de syntax van CSS. Hiervan bestaan inmiddels vele benaderingen en implementaties. De meest bekende zijn LESS, SASS en SCSS. Dit verhaal gaat over SASS en SCSS. Op deze website vind je ook een verhaal over LESS.

SASS
SASS een afkorting voor Syntactically Awesome Style Sheets. Op het moment dat dit wordt geschreven is 3.4.11 de geldige versie. De website is sass-lang.com.
Het idee voor LESS is afkomstig van SASS, dat is geschreven in de programmeertaal Ruby; LESS is geschreven in JavaScript.

SASS is bedoeld om het schrijven van CSS te vereenvoudigen. Je verkleint de code door eigenschappen één keer toe te kennen aan een CSS-eigenschap. Die techniek heet Mixins. Het scheelt aardig wat typen en/of knippen en plakken.

SCSS
SASS is er twee smaken: SASS en SCSS (Sassy CSS). in beide varianten kun je variabelen gebruiken. De naam van een variabele begint in SASS en in SCSS met een $, zie de voorbeelden:

De SASS-code
 
$font-stack: Helvetica, sans-serif
$primary-color: #333
 
body
  font: 100% $font-stack
  color: $primary-color

 
Doet hetzelfde als de SCSS-code
 
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
font: 100% $font-stack;
color: $primary-color;
}
 
Beide codes compileren tot deze CSS:
 
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Zoals je ziet staat SCSS dichter bij CSS dan SASS. In SASS zijn de accolades vervangen door regeleinden. Het is daarom essentieel dat de regels die samen een blok vormen, correct inspringen. Als je gewend bent om in Ruby te programmeren zul je daar weinig problemen mee hebben. Anders is het lastig en zal de SCSS-syntax je meer aanspreken.

In de oorspronkelijke versies van SASS begon (onder andere) een variabele-naam met een uitroepteken en werd er een =-teken gebruikt in plaats van een dubbele punt. Dat was in SASS versie 1 en 2.

Als je SASS- of SCSS-code schrijft, sla je die op in files met de extensie .sass resp. .scss.
SASS en SCSS worden niet 'at runtime' gecompileerd, maar worden door een aparte preprocessor omgezet van .sass- of .scss-bestanden in .css-bestanden. Deze .css files link je in je HTML-code.

De preprocessor is een script dat is geschreven in Ruby. Om Ruby-scripts te kunnen draaien op je PC heb je de Ruby runtime module nodig. Die kun je gratis downloaden van www.ruby-lang.org/en/. Op de SASS-website staat uitgebreid beschreven hoe je je .sass en .scss bestanden kunt compileren tot .css.
Als je SCSS schrijft kun je het ook doen met behulp van een PHP-script. Aanwijzingen daarvoor lees je in DEZE BLOGPOST.

Tenslotte:
Het past niet in de gedachte achter deze website om tools als SASS of SCSS in te zetten bij het maken van webdocumenten. Dat gebeurt op deze site dan ook niet. Ook in de code-voorbeelden zul je geen SASS, SCSS of iets dergelijks tegenkomen.