Werken met Sass en Compass

Aansluitend op het introducerende artikel HTML en CSS schrijven gaat dit artikel in op de voordelen van Sass en Compass. Waarom zijn deze hulpmiddelen interessant?

Het doel

Zowel Less als Sass willen bereiken dat er minder CSS geschreven hoeft te worden, de code leesbaarder en onderhoudbaarder is. Beide schrijven ze eenmalig een CSS bestand weg, wat daarna meermaals als statisch bestand door de web server aan browsers doorgegeven kan worden.

De middelen

Om deze doelen te bereiken, hebben zowel Less als Sass de volgende mogelijkheden:

Variabelen en rekenen in CSS.
Hoe saai is het om dezelfde kleur meermaals op te schrijven in CSS en deze dan eventueel later - op alle plaatsen - aan te passen? Het gebruik van variabelen ondervangt dit, waardoor de CSS onderhoudbaarder wordt. Door goed gebruik van namen wordt de code ook leesbaarder (voorbeeld: de naam 'waarschuwingskleur'). Daarnaast is de mogelijkheid te kunnen rekenen zeer praktisch (voorbeeld: left: breedte box A + marge).
Mixins.
Na eenmaal een blokje geschreven te hebben met meerdere regels voor bijv. ronde hoeken, kan deze daarna met 1 regel aangeroepen worden. Dit is vergelijkbaar met het gebruik van functies in een programmeertaal, al dan niet zonder parameters. De mixin zorgt ervoor dat in de CSS uitvoer een aantal standaard regels opgenomen worden.
Functies.
Er zijn standaard functies beschikbaar voor de bewerking van kleuren (zoals lichter maken), of rekenkundig (zoals afronden). Ook is het mogelijk zelf functies te definiëren. Een functie geeft in tegenstelling tot een mixin een waarde terug.
Commentaar voor de programmeur wat niet in de CSS terecht komt.
Het voordeel; schone en compacte CSS.

Het motief

Het belangrijkste motief om Sass te kiezen boven Less, is dat Sass is gemaakt om eenvoudig uit te breiden. Ook de mogelijkheid tot standarisatie via eigen libraries was een belangrijk doel. Een gevolg van deze filosofie is het ontstaan van het Compass CSS authoring framework. Sass heeft bovendien betere documentatie en is volwassener.

Een ander motief is de mogelijkheid om loops (bijv. een for loop) en beslissingen (if statements) te kunnen gebruiken. Hierdoor kunnen eigen libraries beter reageren op allerlei omstandigheden (ofwel parameters en condities).

Ook kan Sass als output style 'minified CSS' produceren, ofwel zeer compacte CSS.

Dankzij Compass kunt u kant-en-klare mixins gebruiken voor bijvoorbeeld ronde hoeken en standarisatie van typografie. Eventueel kunt u gebruik (blijven) maken van Blueprint - wat met meegeleverde mixins wordt ondersteund. Ook worden allerlei mixins meegeleverd voor specifieke browser fixes of hacks, specifieke styling (zoals een lijsten en pagina indeling), etc. Met een tool voor sprite sheets wordt het u makkelijk gemaakt om bandbreedte en server load te besparen.

Van de door Twitter ontwikkelde CSS toolkit Bootstrap, geschreven in Less, is inmiddels ook een Sass port beschikbaar.

Conclusie

Hoewel Less een goede tool is, verdient het aanbeveling te werken met Sass. Er is geen investering voor nodig en zal een goede strategische keuze voor de toekomst blijken te zijn.

Voor naadloze integratie met Drupal 7 hebben wij een module geschreven die als open source is gepubliceerd op github.