Build Tools
De buildtool waarmee ik in dit project wil gaan werken is Sass/SCSS. Voorgaand jaar heb ik hier al een beetje mee kunnen werken en de manier waarop het wordt geschreven vind ik duidelijk en het werkt ook makkelijk.
SCSS kan op dezelfde manier worden geschreven als CSS alleen heeft SCSS meer mogelijkheden zoals het gebruik van variabelen voor meermalig gebruik van bijvoorbeeld kleuren en kan de styling worden ingesprongen voor overzichtelijke en handige styling van geneste elementen. Een voorbeeld van de variabelen in SCSS is hieronder te zien.
$font-stack: Helvetica, Arial, sans-serif;
$prim-backgr-color: #201030;
$sec-backgr-color: #d3d3d3;
$prim-button-color: #1160a3;
$sec-text-color: #fdfdfd;
$prim-style-and-title-color: #e08c46;
$sec-style-color: #a73534;Hieronder is een voorbeeld te zien van de styling in CSS met daarna een voorbeeld in SCSS met dezelfde styling.
CSS
SCSS
De styling wordt hierbij geschreven in een style.scss bestand waarna deze wordt omgezet in een style.css bestand door middel van een run script dat ik in package.json heb gezet. Dit run script voert parallel de scripts 'node-sass' (voor scss naar css) en 'nodemon' (voor server) uit waarbij de styling en de server automatisch refreshen bij aanpassingen. Het is alleen opletten dat er geen .css bestand naar GitHub wordt gepushed omdat dit voor conflicten kan zorgen.
Het run script in package.json genaamd 'dev':
"dev": "npm-run-all --parallel node-sass nodemon"