5 manieren om SASS te compilen

Henri Kok, 21 september 2020 Scroll om meer te lezen

Als je een website bouwt op de ambachtelijke manier, dus door HTML en CSS te schrijven, loop je er al snel tegenaan dat je CSS erg onoverzichtelijk wordt. Je CSS-bestand wordt al snel erg lang. Je kunt er dan voor kiezen om je CSS domweg op te splitsen in meerdere CSS-bestanden, maar dat heeft als nadeel dat er bij elke paginaweergave extra bestanden gedownload moeten worden van je server. Dat betekent een hogere belasting voor je server, en een tragere website. Daarom kiezen veel webontwikkelaars ervoor om een zogeheten preprocessor te gebruiken, die het schrijven van CSS makkelijker maakt. Je hebt er verschillende, maar PostCSS, LESS en SASS zijn de meest bekende. Bij First gebruiken we SASS.

Als je SASS schrijft, kan de browser daar niks mee. Je moet het omzetten naar CSS. Compilen noemen we dat. Er zijn verschillende manieren om dat te doen. Dit artikel is bedoeld om je te helpen om de juiste manier voor jouw project te kiezen.

1. Scout-App

Veruit de makkelijkste manier om SASS te compilen is het gebruik van Scout-App. Dat is een hele simpele app, waarbij je alleen maar hoeft in te vullen waar je SASS-bestanden staan en waar je CSS-bestanden moeten komen. Verder hoef je jezelf nergens druk over te maken. De app ziet wanneer je een aanpassing hebt gedaan in je SASS en schrijft dan automatisch nieuwe CSS. Als je een typfout maakt, krijg je een melding.

Het grote voordeel hiervan is dat het heel simpel is. Voor veel projecten is het gebruik van Scout-App ruim voldoende. Voor grotere projecten is het vaak verstandig om een meer geavanceerde oplossing te kiezen, waarmee je bijvoorbeeld ook JavaScript-bestanden kunt bundelen. Daarover later meer.

Wat wij missen in Scout-App is Autoprefixer. Dat is een handige tool die ervoor zorgt dat vendor prefixes automatisch worden toegevoegd aan je CSS. In andere tools kun je die vrij makkelijk integreren, maar Scout-App mist deze functie.

2. Compass

Bij First hebben we voor het compilen van SASS lange tijd Compass gebruikt, een zogeheten Ruby gem. De eerste versies van SASS zijn namelijk geschreven in Ruby. Geen zorgen, je hoeft eigenlijk niks van Ruby te weten om op deze manier te kunnen werken. Wij weten dat namelijk ook niet, maar we hebben het wel jaren gebruikt. Het voordeel van deze methode is dat je SASS één keer op je computer installeert en daarna zonder problemen altijd kunt gebruiken. Nadelen zijn er ook: Compass wordt niet meer doorontwikkeld, en is een stuk trager dan de meeste alternatieven. En om het te kunnen gebruiken moet je Ruby op je computer installeren. Als je verder nooit met Ruby werkt, is dat zonde van je schijfruimte.

Dit zijn de stappen die je moet zetten als je met Compass wilt werken:

  1. Download en installeer Ruby op je computer
  2. Installeer via de terminal een aantal zgn. gems. Dat is heel simpel: je opent je terminal en typt gem install {de naam van de gem}. In dit geval moet je twee gems installeren:
    gem install compass
    gem install autoprefixer
    Let op! Als je macOS gebruikt, moet je voor de terminal-commando’s sudo gebruiken, anders krijg je foutmeldingen.
  3. Maak een bestand config.rb aan in de map waar je SASS wilt compilen. Je kunt als voorbeeld dit bestand gebruiken, hierin hoef je alleen de paden op regel 3 en 4 aan te passen.
  4. Ga in je terminal naar de map waar de config.rb staat en voer het volgende commando in: compass watch. Het script gaat nu je SASS-bestanden in de gaten houden, en zodra je iets wijzigt, schrijft het nieuwe CSS voor je.

3. De terminal

Als je de nieuwste versie van SASS wilt gebruiken, kun je dat vrij makkelijk doen door deze te downloaden van GitHub. Daar staan niet alleen downloads voor verschillende systemen, er wordt ook uitgelegd hoe je ze installeert.

Heb je SASS op die manier geïnstalleerd, dan kun je in je terminal naar de map gaan waar je SASS wilt compilen. Daar kun je een simpel commando opgeven: sass --watch input.scss output.css. En boem, het werkt.

Een voordeel hiervan is dat het goed en snel werkt, zonder dat je daarvoor ingewikkelde configuratiebestanden hoeft te gebruiken. En je hoeft er geen Ruby of NodeJS voor te installeren. Daarnaast heb je op deze manier altijd de meest recente versie van SASS te pakken, wat een voordeel is omdat er recent een grote update is geweest, die op het moment van schrijven in de meeste andere pakketten nog niet is doorgevoerd. Een nadeel is dat je geen Autoprefixer hebt en dat er geen integratie is met andere build tools, zoals je dat wel hebt wanneer je NodeJS-tools zoals Parcel gebruikt.

4. Parcel

Parcel is een hele makkelijke tool om SASS mee te compilen. Je moet er wel NodeJS voor op je computer hebben. Je installeert Parcel met het volgende commando: npm install parcel-bundler -g (op macOS moet je er weer sudo voor zetten). Daarna moet je in je project een JavaScript-bestand aanmaken en daarin het volgende regeltje code opnemen: import ‘mijn-sass-bestand.scss’;. Ga daarna in je terminal naar de map waar het JavaScript-bestand staat en typ dan parcel watch mijn-javascript-bestand.js. Vanaf dat moment gaat alles vanzelf.

Parcel kan veel meer dan alleen maar SASS compilen. Kijk maar eens op de website, parceljs.org. Parcel is een complete build tool voor allerlei JavaScript-frameworks, voor andere CSS-preprocessors zoals LESS en PostCSS, en nog veel meer.

5. PHP

Als je, zoals wij, websites bouwt die geschreven zijn in PHP, kun je ervoor zorgen dat je SASS automatisch omgezet wordt, zonder dat je daarvoor iets hoeft te doen. Je kunt hiervoor de PHP-package ScssPhp gebruiken. Dit pakketje is vrij eenvoudig in te stellen en het vereenvoudigt je workflow aanzienlijk.

De makkelijkste manier om ScssPhp te installeren is via Composer. Je hoeft hier verder niet veel over te weten om het te kunnen gebruiken; je moet alleen Composer downloaden en installeren. Op de website van Composer staat uitgelegd hoe je dit moet doen. Daarna moet je in de map van je project de terminal openen en composer require scssphp/scssphp invoeren.

Deze lijst is helemaal niet compleet. Er zijn nog veel meer tools om SASS mee te compilen. Het kan bijvoorbeeld ook nog met Laravel Mix, Webpack, Grunt, Gulp en Rollup. Als je op een Mac werkt, kun je bijvoorbeeld ook CodeKit gebruiken, een mooie grafische tool waarmee je ook JavaScript kunt bundelen. Maar wij denken dat je met deze lijst al een heel eind op weg bent.

Ook zo’n toffe website?

Er staat nog geen koffie klaar, maar als je even belt is ie snel gezet.

Bel nu 0575 76 90 64

of mail henri@2bfirst.nl