Samenvatting H9 Webapplicaties I

Jakob Lierman Webapplicaties I



Hoofdstuk 9
.sass: gebruikt indents en shorthand notaties




.scss: gebruikt css conventies: {} en ;




Preprocessing
Bestand site.scss aanmaken in css folder.

Belangrijkste features
- Variabelen
- Nesting
- Mixins
- Imports
- Inheritance
- SassScript

Variabelen
Toekennen van waarde aan een variabele:

- Voordeel: geen hex waarden uit hoofd kennen
- Compilatie zet dit teru om in de correcte CSS schrijfwijze

Mogelijke waarden:

- Hex values, strings, kleuren, nummers, boolean values, zelfs lijsten van waarden

Variabelen hebben een scope:

- Afhankelijk van plaat
o Als gedefinieerd binnen een selector, den enkel gekend in selector
o Anders globale scope

$variabele: value;




1

, Jakob Lierman Webapplicaties I




String interpolatie:

- De waarde van een variabele gebruiken als onderdeel van een stukje tekst (url, naam van een
property of selector, …)
Definitie: $variabele: value;
Gebruik: #{$naamVariabele}
- Voorbeeld uitwerken
o

o

Nesting
Een oplossing voor de eindeloos lange seletors in css:

- Het nesten van stijlregels
- Voorbeeld




o
Nesten van stijlregels gebaseerd op een relatie (>, ~, +, …)




2