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
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
