1. 2. Wat is SASS?
1.1. CSS extensie
1.1.1. http://sass-lang.com/
1.2. Pre-processed
1.2.1. Noodzakelijke tools
1.2.1.1. Codepen.io
1.2.1.2. Een tool als Prepros
1.2.1.2.1. http://prepros.io
1.2.1.3. Andere
1.2.1.3.1. Gulp.js
1.2.1.3.2. Node en Sass
1.3. Uitbreidbaar met plug-ins
1.4. Mogelijkheden
1.4.1. Variabelen
1.4.2. Nesten
1.4.3. Partials
1.4.4. Mixins
1.4.5. Extend
1.4.6. Operators
1.5. Formaten
1.5.1. .sass
1.5.1.1. heel minimalistisch, voor geavanceerd gebruik
1.5.2. .scss
1.5.2.1. Nieuwere syntax
1.5.2.2. Bijna exact als CSS, maar je krijgt de SASS functionaliteit erbij
1.5.2.3. Interessant om te leren en SASS geleidelijk aan te beginnen te gebruiken
2. 1. Inleiding
2.1. SASS = Syntactically Awesome Style Sheets
2.2. Snel een belangrijke tool geworden voor webontwikkelaars
2.3. Gaat hier om notaties, uitbreidingen
2.3.1. Dit wil zeggen: onze browsers kunnen deze uitbreidingen niet lezen
2.3.2. "Iets anders" moet SASS terug omzetten naar begrijpbare CSS
2.4. Er bestaan verschillende van dat soort extensies
2.4.1. Alternatieven voor SASS: Less, Stylus, PostCSS...
2.4.2. Er bestaan ook extensies om documenten te schrijven
2.4.2.1. Markdown
2.4.2.1.1. https://en.wikipedia.org/wiki/Markdown
2.4.2.1.2. https://daringfireball.net/projects/markdown/syntax
3. 3. Variabelen
3.1. Zowat DE reden om SASS te beginnen gebruiken
3.2. $mijnKleur : #EEE8D5;
3.3. body {background-color: $mijnKleur;}
4. 4. Nesten
4.1. Je gebruikt dit om CSS rules te maken voor "kinderen van"
4.2. Je kan zo diep "nesten" als je wil (ga wel niet dieper dan 3 tot 4 niveaus, anders wordt de gegenereerde CSS wat onpraktisch)
4.3. Je gebruikt het vormelijk op dezelfde manier als media queries
4.4. ol {margin: 0; padding: 0; list-style: none; li { color: red; border: 1px solid black; margin-bottom: 5px; }}
5. 5. Partials
5.1. Met Partials kan je je CSS opsplitsen in meerdere bestanden
5.2. @import "base.scss";
5.3. Zal uiteindelijk samengesmeed worden tot één CSS file, maar je code blijft supergeorganiseerd.
5.4. Je kan het principe gebruiken om reset.css, of normalize.css te importeren als partial
5.4.1. https://necolas.github.io/normalize.css/