Build tools

SASS/SCSS

Ik heb voor dit project ook Sass geïnstalleerd. Het installeren van Sass verliep niet geheel vlekkeloos. Ik kreeg het namelijk niet aan de praat, na enige tijd kwam ik erachter dat dit kwam omdat de versie van Sass die ik geïnstalleerd had niet meer gesupport werd. Na het volgen van de documentatie over de installatie van Sass voor Node.js op de officiële website van Sass is het installeren toch gelukt.

Het gebruik van Sass was eerst wel even wennen omdat ik dit nog niet eerder had gebruikt, echter vind ik het veel prettiger werken dan normale CSS. Veel principes zijn tegenwoordig wel al in normale CSS geïntergreerd zoals het gebruik van Costum-properties. Maar de voornaamste reden dat ik Sass/Scss fijner vindt dan normale CSS is het feit dat je kan nesten en files kan importeren. Dit maakt het naar mijn mening veel georganiseerder dan als je dit niet zou doen. Ik heb namelijk gebruik gemaakt van een main file waarin ik alle losse files in importeer. Ik heb voor elke pagina binnen de app een losse Sass file aangemaakt. Op die manier hoef ik veel minder te zoeken als ik dingen wil aanpassen binnen de CSS. Ook vindt ik het nesten heel fijn werken want zo blijf ik niet oneindig pseudo-selectors schrijven maar kan ik dingen gewoon nesten in de parent.

Onderzoek Buildtools zoals Preprocessors

Wat zijn CSS preproccers?

Developers gebruiken pre and postprocessors omdat het het makkelijke maakt om repetitive tasks te automatiseren, daarnaast vermindert het errors en kun je herbruikbare code snippets schrijven. Elke CSS preprocessor heeft een zijn eigen syntax die gecompiled wordt tot regular CSS zodat de browser het kan renderen aan de clientside.

Welke Preprocessors zijn het populairst?

1. Sass/Scss

SASS is de meest mature en stabiele en populairste preprocessor die er beschikbaar is op het moment. SASS werdt gereleased in 2006, en is sindsdien erg populair. Sommige features zijn inmiddels als geïntergreed in regular css (zoals costum properties) maar desalniettemin blijft het een handige & populaire extentie voor developers. Met SASS gebruik je geen curly brackets bij het nesten van code, met SCSS doe je dit wel. Daarom vind ik persoonlijk SCSS prettiger werken omdat dit voor mij veel overzichtelijker is.

2. LESS

LESS werdt gereleased in 2009, en is daarmee een van de oudste. Het heeft veel dezelfde features als SASS. Denk hierbij aan functions en mixins. Ook is de syntax erg vergelijkbaar met regular CSS, daarom is de learning curve van LESS ook niet heel hoog.

3. Stylus

Stylus werg gelaunched in 2010. Ook is Stylus minder populair en heeft een kleinere userbase dan SASS en LESS. Het is gebouwd met Node.JS en wordt vaak ook in combinatie met Node gebruikt. Ook gebruikt Stylus geen curly brackets om code blocks te maken. Sommige developers vinden dit ook prettiger werken, echter ik vind het minder prettig omdat ik al zo gewend ben om brackets te gebruiken. Het maakt het voor mij alleenmaar onoverzichtelijk.

4. PostCSS

PostCSS is een van grootste alternatieven van SASS, LESS en Stylus. Het grootste verschil tussen PostCSS en de andere preprocessors is dat PostCSS de gebruiker laat kiezen welke functionaliteiten ze willen toevoegen om te gebruiken, terwijl de andere over het algemeen gelijk alle functionaliteiten out of the box hebben.

SASS/SCSS

Ik heb er voor gekozen om SASS/SCSS te gebruiken voor dit project. De reden dat ik SASS/SCSS ga gebruiken i.p.v. andere preprocessors is dat SASS/SCSS veruit de meest populaire preprocessors is. Ook wordt de github page van SASS/SCSS regelmatig geupdate, waaruit we kunnen concluderen dat SASS/SCSS goed gesupport wordt. SASS Github page

Syntax & main features

Nesting:

SASS/SCSS laat de gebruiker toe om CSS selectors te nesten zodat de gebruiker niet onnodig lange CSS selector titels hoeft te typen.

Dus stel je schrijft in regular CSS:

section {
  background-color: #000000;
}

section article {
  padding: 1em;
}

section article div {
  margin: 1em;
}

section article div p {
  font-size: 1em;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

Dan schrijf je in SCSS:

section {
  background-color: #000000;

  article { 
    padding: 2em;

    div{
      margin: 1em;

      p{
        font-family: 'Poppins', sans-serif;
        color: #fff;
        font-size: 1em;
      }
    }
  }
}

Of in SASS:

section 
  background-color: #000000

  article 
    padding: 2em

    div
      margin: 1em

      p
        font-family: 'Poppins', sans-serif
        color: #fff
        font-size: 1em
      
    
  

Mixins

Mixins maken het mogelijk om gemakkelijk meerdere CSS regels samen te voegen.

Dus stel je schrijft in regular CSS:

nav ul {
margin: 0;
padding: 0; 
list-style: none;
}

nav ul li {
display: inline-block;
margin-left: -2px;
margin-right: 2em;
}

Dan schrijf je in SCSS:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

Of in SASS:

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
  @include reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em




nav ul
  @include horizontal-list

Import

Doormiddel van de @import feature kan de developer de CSS opdelen in meerdere bestanden. Dit maakt de CSS een stuk overzichtelijker omdat je direct weet bij welke file je moet zijn om de styling van een bepaalde pagina of component aan te passen. Vaak maakt de developer een app.scss aan waarin alle losse SCSS files worden geïmporteerd doormiddel van de @import feature.

Een voorbeeld van de indeling van een bestand waarin alle losse SCSS bestanden in worden geïmporteerd is:

@import 'variables';
@import 'utility classes';
@import 'partials'

@import 'homepage';
@import 'register';
@import 'login';

Hoe installeer ik een preprocessor zoals SASS?

Script in node.js

Je kan SASS/SCSS runnen via node. Dit doe je door eerst Node te installeren in je project. Type dan het volgende in de commandline/terminal:

npm install

Installeer vervolgens SASS/SCSS met het volgende command:

npm install -g sass

Vervolgens voeg je het volgende toe in de script sectie in de package.json file :

 "scripts": {
    "start": "node server.js",
    "sass": "node-sass --watch resources/sass/app.scss -o public/css --output-style compressed"
  },

Ook kan je zoals hierboven " --output-style compressed" erachter zetten. Dit zorgt ervoor dat de output van de SASS/SCSS gecompressed wordt waardoor de bestandsgrote kleiner is wat kan bijdragen aan snellere laad tijden voor je webapplicatie.