Kop 1

tagline

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.

Leerdoelen

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

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.

Opdracht

  1. Installeer Sass op jouw systeem;
  2. Maak een kopie van jouw training UXD Pixel perfect;
  3. Bouw je hele CSS op met Sass;
  4. Maak hierbij minimaal 4 bestanden die tot een css-bestand gecompileerd worden;
  5. Maak
    • gebruik van sass-variabelen;
    • een mixin.

Bonusopdracht

Maak gebruik van:

  • een zinvolle overerving;
  • alleen maar sass-bestanden.

Sass installatie en start (00:06:27)

Sass is een preprocessor en het compileert meerdere scss- en sass-bestanden tot één css-bestand.
Hierdoor kun je werk in specifieke onderdelen opdelen. In dit voorbeeld importeert het hoofdbestand een ander bestand met variabelen, een met globale instellingen, een met de home-pagina-stijlen en een echt sass-bestand voor de opmaak van de footer.
Het werkt nog niet, eerst moet sass op je subteem worden geïnstalleerd. Ervan uitgaande dat Node.js als op je systeem staat, kan dat met npm, zoals je dat vindt op https://sass-lang.com/install

npm install -g sass
De toevoeging -g zorgt ervoor dat Sass op jouw systeem staat en je kunt dat dan voortaan in elk project gebruiken. Controleer de installatie door het versienummer van Sass op te vragen met sass --version of het help-bestand op te vragen met
sass -h

Sass opstarten

Navigeer vervolgens met de CLI naar de root van je project.
Daar geef je de CLI de volgende opdracht:

sass --watch scss/main.scss:css/style.css

Sass wacht dan tot het scss/main.scss wordt opgeslagen (of één van de gekoppelde sass- of scss-bestanden!) en compileert dan naar css/style.css
Je ziet direct dat style.css (die eerst leeg was) nu gerenderd is door Sass.

In dit korte filmpje wordt ook een wijziging doorgevoerd: _footer.sass wordt geïmporteerd met @import 'footer';
Dit leidt in dit geval tot meerdere selectie-regels met css omdat er ook een (hier niet zo zinvolle) extensie gebruikt wordt.
Merk op dat in de syntax van dit zuivere sass document geen accolades en punt-komma gebruikt wordt!

kennismaken met Sass 1: de installatie (00:03:25)

Sass compileert de documenten naar een css -bestand. Het is een programma dat dus zelf eerst geïnstalleerd wordt. Je ziet waar de documentatie te vinden is.
Het gebeurt allemaal met Terminalopdrachten. (Op Windows gebruik je de prompt). We gaan ervan uit dat Node.js en Node Packet Manager (npm) geïnstalleerd zijn. Controleer dat in de terminal met npm -v. Op mijn Mac werkt de recentste Dart Sass niet. Omdat Ruby geïnstalleerd is (controleer met ruby -v) kon ik met sudo gem install sass Sass installeren. Controleer de installatie met sass --version https://blanken5.home.xs4all.nl/sass.html

kennismaken met Sass 2: Sass starten
(00:06:16)

We werken vanuit een kant en klaar html-document. De koppeling naar het CSS-bestand is er al. We maken in een css-map main.css aan. Dit is het bestand waarnaar Sass moet gaan schrijven.
Sass leest bij het compilen een scss-document. We maken daarom sass/main.scss aan.
Met de Terminal navigeer je naar de projectmap. Vervolgens start je het proces met
sass --watch sass/main.scss:css/main.css Je ziet een bevestiging in je terminal en bij het aanpassen van main.scss wordt bij het opslaan main.css gecompileerd. De resultaten moeten in de browser te zien zijn. https://blanken5.home.xs4all.nl/sass.html

kennismaken met Sass 3: variabelen
(00:04:25)

In Sass kun je werken met variabelen. Met een dollarteken kun je ze eenvoudig declareren. Met dezelfde naam roep je hun waarden ook weer op.
Je kunt ook met deze variabelen rekenen.

kennismaken met Sass 4: nesting
(00:08:08)

Met nesting wordt bedoeld dat je child-elementen in het bereik van de parent selector opneemt. Het parent element is nog niet afgesloten en de selector van het child staat er dus binnen.

kennismaken met Sass 5: imports
(00:07:27)

Een van de belangrijkste kenmerken van sass is dat je stijlbladen kunt importeren. Als je het slim aanpakt, kun je beter overzicht houden en in een team aan de opmaak gaan werken.
Een bestand als _mijnStijl.scss is dan te importeren met @import 'mijnStijl'

kennismaken met Sass 6: .sass vs. .scss
(00:06:06)

In een project zijn .scss bestanden en .sass-bestanden door elkaar te gebruiken. .scss heeft meer overeenkomsten met de bekende .css - syntax.
Bij .sass is de ; stikt verboden en je komt ook geen { } tegen. De betekenis wordt door de inspringing bepaald. de syntax ziet er voor liefhebbers zeer strak uit. dat verklaart ook de term Awful is Sass.
Krijg je hier ook trek in? doe dan de bonusopdracht.

kennismaken met Sass 7: commentaar
(00:01:27)

Commentaarregels in sass lijken op die van JS. Ze worden niet meegenomen bij het compilen. Dat klinkt logisch, want je werkt in de sass-map.
// Dit commentaar wordt dus niet gecompileerd.
Mocht je toch nog commentaar in de uitvoer wensen (denk bijvoorbeeld aan WordPress), dan moet je de css-schrijfwijze gebruiken: /* dit wordt mee-gecompileerd */

kennismaken met Sass 8: Mixins sass
(00:10:47)

Mixins zijn als het ware de functies van Sass.
Ze hebben argumenten en de functie kun je aanroepen en de parameter(s) meegeven.
regels die veel herhaling vragen zijn bijvoorbeeld pre-fixen voor ondersteuning van oudere browsers. Heb je de mixins eenmaal geschreven in een apart sast-bestandje dan kun je ze elk project gebruiken!
Maak zo dus je eigen sass-library met al je mixins!!

kennismaken met Sass 9: Mixins scss
(00:06:50)

Het nut van mixins zag je in de vorige video. Omdat ze zo handig zijn hier hetzelfde voorbeeld maar dan in scss. Deze wordt geschreven voor een mediaquery voor de navigatie-elementen.
Je ziet dus ook dat hoe importeren bij sass-syntax verloopt. Om een mixin te importeren gebruik je @include mixinnaam(argumeten);

kennismaken met Sass 10: overerving
(00:03:00)

Bij overerving krijgt een element de opmaakeigenschappen van een eerder opgemaakt element: Hij 'erft' ze in feite. Daarnaast kun je het element nog extra eigenschappen meegeven. De syntax is dan ook @extends gevolgd door de selector van het element waarvan je erft.
De Engelse term hiervoor is 'extends' en doet je wellicht denken aan overerving bij Java.


Inleveren

  • Na afloop plaats je deze training online in je bewijzenmap;
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • De validatie icoontjes plaats je in de footer.
    Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
  • Plaats jouw code op in een aparte repository op GitHub en plaats jouw uitwerking online;
  • Maak in jouw GitHub-repo een README.md met daarin tenminste een link naar jouw online uitwerking.
  • Plaats de GitHub-link in ELO Magister bij de FRO-opdracht sass.