Sass

Syntactically Awesome Style Sheets

website Sass

een Bootstrap voorbeeld

Leerdoelen

  • installatie van Sass
  • opstarten van Sass in jouw workflow
  • variabelen
  • SCSS versus Sass
  • opdelen en importeren
  • mixins
  • overerving

Wat is ?

Preprocessor

Syntactically Awesome Style Sheets

  • Sass maakt uit meerdere .scss-bestanden en .sass bestanden één CSS-bestand
  • Kijk eens in jouw Bootstrap CSS van vorige week hoe groot dat CSS-bestand is
  • De developer houdt het overzicht en maakt toch 1 CSS-bestand voor de browser
bril van Sass

Een pre-processor maakt van meerdere .scss- en .sass-bestanden één .css-bestand

Sass compileert
bril van Sass

Een pre-processor maakt van meerdere .scss- en .sass-bestanden één .css-bestand

Wat is handig ?

  • opdelen van jouw CSS (vorige dia)
  • werken met variabelen (aanpassingen aan huisstijlen eenvoudig!)
  • rekenen met variabelen
  • mixins besparen je veel herhalingen (DRY)
  • overerving (bijvoorbeeld verschillende buttons)
  • nesting (stijlen voor elementen in andere elementen)
  • bij compilatie komt foutmelding bij fouten

compileren CLI (commandline: opdracht-promt of Terminal)

sass --watch main.scss : style.css
compileren in Sass

Codevoorbeeld: variabelen in SCSS/SASS


SCSS

SASS

gecompileerd naar CSS

Codevoorbeeld: nesting in SCSS/SASS


SCSS

SASS

gecompileerd naar CSS

Codevoorbeeld: partials (importeren) in SCSS/SASS


SCSS

SASS

gecompileerd naar CSS

Installatie via npm

sudo npm install -g sass

Soms is sudo noodzakelijk omdat bij een 'globale' installatie beheerdersrechten noodzakelijk zijn.
Er wort dan ook naar je beheerderswachtwoord gevraagd.


Sass compileert

controle of Sass geïnstalleerd is

Feitelijk vraag je de versie van Sass op met de commandline

sass --version
ontwerp van mobile

De opdracht

ontwerp voor desktop
  • Gebruik beide schetsen hiernaast als richtlijn
  • Installeer Sass
  • Instructies op https://blanken5.home.xs4all.nl/sass.html
  • Gebruik eigen namen voor bestanden en variabelen
  • Site online
    (exclusief sass/scss)
  • Alle bestanden op GitHub (incl. sass/scss)
  • Linkje live versie in README.md

Links


Credits

Deze presentatie is gemaakt met gebruik van:

  1. WebSlides
  2. Video tutorial Brad Traversy
  3. documentatie WebSlides