Kop 1

Sass: kennismakenen met een CSS-preprocessor

Sass is een css pre-processor: Syntactically Awesome Style Sheets. Het heeft verscheidene voordelen, vooral als projecten erg groot zijn. Je kunt je opmaak in meerdere kleine bestandjes bewerken, en Sass compileert deze bestanden tot één css-bestand.
Je kunt bestanden importeren, die in de compilatie worden meegenomen, je kunt werken met variabelen en mixins zorgen ervoor dat je veel voorkomende herhalingen in een soort van functie kunt plaatsen en deze naar believen aanroepen. Ook kun je kleuren in variabelen stoppen en naar andere kleuren omrekenen.
Je kunt met een kleurwijziging de hele kleurstelling op verschillende plaatsen van een document doorvoeren.

Onderstaande video's zijn een hulp om te zien hoe het kan werken.
Ze zijn niet bedoeld om precies na te doen. Zie hiervoor de opdracht.

Leerdoelen

• installatie Sass;
• starten Sass;
• variabelen;
• opdelen/importeren;
• mixins;
• overerving.

Opdracht

1. Installeer Sass op jouw systeem;
2. Gebruik hierbij de volgende gist: https://gist.github.com/Theo-denBlanken/25809e078eb552b0a06386766b1ba767 of gebruik een vergelijkbaar document.
3. Bouw je hele CSS op met Sass;
4. Bedenk eigen namen voor de variabelen en partials!!!
5. Maak hierbij minimaal 4 bestanden die tot één css-bestand gecompileerd worden;
6. Maak
   • gebruik van sass-variabelen;
   • een mixin.

kennismaken met Sass 0: het te verwachten resultaat
(00:00:51)

Hoewel je in deze videoreeks net zo goed andere resultaten kunt bereiken en dit ook zonder Sass maakbaar is, toch maar voor degene die moeilijk zelf iets kunnen bedenken, een mogelijk resultaat.

kennismaken met Sass 1: Installatie van Sass
(00:07:48)

In deze video installeren we Sass via npm.
Open Terminal (of Windows prompt) om met de opdracht van de CLI (command line)
npm --v de versie vast te stellen.
Heb je geen versie dan kun je deze installeren via https://nodejs.org/en/
Met npm kun je Sass installeren.
Ook hier kun je met sass --version de versie van Sass vaststellen en daarmee of je Sass geïnstalleerd hebt.
Installatie met npm install -g sass
of sudo npm install sass als je op de Mac/Linux met beheerders rechten globaal mag installeren. In dit laatste geval zal er om je beheerderswachtwoord worden gevraagd.

Als je nog geen project-map hebt, maak je die nu eerst aan. Maak daarin een map scss met daarin en leeg document main.scss. Ook een map css met daarin style.css, die je koppelt aan jouw webpagina.
Nu zorg je dat de Terminal/Windows-prompt in jouw projectmap staat.
Je geeft het commando cd met een spatie en sleept de projectmap op de CLI en een Enter.
Dan zie je aan de prompt, dat je erin zit.
Tot slot geeft je sass --watch scss/main.scss css/style.css
Terminal geeft aan dat hij nu uitkijkt naar opgeslagen wijzigingen om die de compileert naar het css-document.

kennismaken met Sass 2: variabelen
(00:05:02)

Binnen Sass kun je variabelen declareren.
De toegekende waarde kun je elders weer uitlezen.
In dit voorbeeld gebruiken we variabelen voor kleuren.
Die gebruiken we hier om de header van een achtergrondkleur te voorzien.
Als de kleur op veel plaatsen wordt gebruikt, kun je die kleur desgewenst overal in 1 keer aanpassen.

kennismaken met Sass 3: partials
(00:06:25)

Sass heeft een sterke troef: je kunt verschillende andere sass- en scss-bestanden importeren en compileren naar één (1) css bestand.
De onderdelen, die je wilt toevoegen krijgen als naam _naamVanBestand.scss of _naamVanBestand.sass. Ze kunnen dan worden geïmporteerd met @import 'naamVanBestand'.
Een prima instrument om jouw stijlen logisch op te bouwen!

kennismaken met Sass 4: nesting en rekenen met variabelen
(00:04:44)

We werken hier verder aan de header.
We kunnen children van het element in SCSS selecteren door ze binnen de accolades { } te declareren, onder de al beschreven eigenschappen.
Hun eigen eigenschappen kommen dan ook weer tussen accolades.
Kijk goed hoe de geneste selecteren in de CSS worden gecompileerd.
We kunnen met de variabelen ook rekenen. Hier maken we een nieuwe kleur door een bestaande lichter te maken met lighten().

kennismaken met Sass 5: logo bewerken
(00:03:39)

Hier wordt het logo bewerkt.
Je komt dezelfde technieken tegen: gebruik van variabelen en het bewaren daarvan: hier maken we de inhoud donkerder dan de achtergrond met darken().
Net als lighten() geef je deze 2 argumenten mee: de kleur en de mate van verdonkering.

kennismaken met Sass 6: sass-partial voor de knoppen
(00:08:08)

Voor het stijlen van de knoppen wordt weer een partial gemaakt, maar nu als een echt .sass-bestand. De syntax ziet er strakker uit.
Hier wordt ook van nesting gebruik gemaakt, maar er komen in het gehad geen {} of ; voor.
Alles wordt hier bepaald door de juiste mate van inspringen.
Je kunt ook een pseudo-class selecteren zonder het element opnieuw te schrijven: een hover bijvoorbeeld met &:hover De partial wordt op dezelfde manier geïmporteerd als .scss-bestanden.
Jouw uitdaging is om deze syntax zelf in andere partials toe te passen!

kennismaken met Sass 7: main en footer stijlen
(00:10:51)

We gaan hier zowel het main-element als de footer stijlen.
Vooral met het gebruik van de technieken die hiervoor ook al te zien zijn: nesting en partials.
main.scss wordt echter nog strakker doordat de opmaak die er nog stond nu ook in een partial wordt ondergebracht. Er staan nu alleen nog maar imports.

kennismaken met Sass 8: de navigatie voor een mobiel
(00:18:41)

Voor de weergave op een mobiel stijlen we de navigatie. Deze video spitst zich in nieuwigheden meer op het plan om te stijlen, dan dat we nieuwe Sass-features tegenkomen.
Eerst nog de validatie-iconen in de footer beter neerzetten.

Het idee is om de container, die de header, main en footer bevat de navigatie te laten bedekken. Als er op het label wordt geklikt, wordt een checkbox gecheckt.
Omdat de container een sibling van de checkbox is, kan hij een andere waarde voor zijn left-positie krijgen, waardoor de navigatie tevoorschijn komt.
De selectie gaat als een combinatie van :checked en de ~-selector. Dit gaat natuurlijk met een transition.
Voor dit alles moet de container een position: relative krijgen en de navigatie een position: absolute.

kennismaken met Sass 9: het label van het menu stijlen
(00:08:56)

Bovendien moet de tekst in het label van de checkbox passen bij de status van de navigatie. Eerst wordt het keer-teken verborgen en de 3 balkjes getoond.
Dit wordt omgekeerd doordat de checkbox wordt gecheckt.
De selectie in de CSS gaat opnieuw met :checked in combinatie met de tilde-selector. Het label is immers ook een sibling van de checkbox en de beide Font-Awesome icons hebben voor de CSS al een class-naam.

kennismaken met Sass 10: het menu horizontaal
(00:14:21)

Voor de mobiele weergave is de pagina klaar. Voor bredere viewports kunnen de menu-items naast elkaar.
Daarvoor kun je op verschillende plaatsen een mediaquerie maken. We kiezen hier de partial van het menu. Als de viewport voldoet aan de querie, wordt er een partial daar geïmporteerd. Deze partial verbergt het label van de checkbox, die al verborgen was.
De navigatie krijgt een relatieve positioning, waardoor deze boven container kan komen. Hier werken we nog maar eens een keer met echte sass-syntax.

kennismaken met Sass 11: mixins in Sass
(00:06:11)

In Sass is het mogelijk om stukken die telkens terugkomen in een soort functie te schrijven: een mixin. Hier gebruiken we daarvoor onze transition bij het mobiele menu.
Het blijkt namelijk dat er voor een ondersteuning van oudere browsers pre-fixen moeten worden toegevoegd. Als je de css invoegt in https://autoprefixer.github.io
voegt deze voor web-kit en Opera-browsers een pre-fix. We maken voor deze pagina en andere projecten daarom een mixin aan.
De scss-syntax daarvoor is @mixin naam($eigenschap) { opmaak met $eigenschap } Als je de mixin dan gebruikt, dan roep je hem aan met @include naam(waarde);

kennismaken met Sass 12 (slot): kolommen voor brede viewport
(00:15:49)

We hebben de aspecten van Sass nu wel gezien. We maken nog een mediaquerie in de partial van de layout om een partial voor de desktop te importeren. Probeer deze maar in sass-syntax om te zetten!
Om kolommen te maken gebruiken we CSS Grid voor de main, zodat de sections naast elkaar komen.
De 3 sections zijn even hoog, alleen de inhoud is dat niet. Daarom maken we van de sections ook grid-parents en maken daar 3 rijen. De kop en de voet krijgen de waarde auto, de overige ruimte is voor de tekst: grid-template-rows: auto 1fr (en een ruime waarde);

Om nu ook de footer tegen de onderkant van de viewport te krijgen, geven we de container voldoende minimale hoogte en gaan we op vergelijkbare wijze met de grid-rijen aan de slag.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap (hierbij zijn de scss/sass-bestanden niet nodig, ze waren er voor de productie);
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan je in de footer.
  
• Plaats jouw code op in een aparte repository op GitHub en plaats jouw uitwerking online.
  Hier zijn de scss/sass bestanden WEL vereist om in te leveren!!;
• Maak in jouw GitHub-repo een README.md met daarin tenminste een link naar jouw online uitwerking.