Introduksjon til  SASS / SCSS

Laget av Camilla Larsen

Agenda

  • Introduksjon
  • SCSS syntax
  • SCSS og react oppstart
  • Oppgaver
  • SCSS global styling
  • Oppgaver
  • SCSS variabler
  • SCSS mixins
  • Oppsummering

Hva står egentlig SASS og SCSS for, og hva er forskjellen mellom disse to?

SASS  =  Syntactically Awesome Stylesheets

SCSS = sassy cascading stylesheet

Fungerer helt likt, kun forskjellig metoder å skrive syntax på

Hvorfor benytter vi SCSS istedet for CSS?

  • Gjør ikke nettsiden vår raskere
  • Forenkler og gjør koden vår smartere
  • Vi kan utvikle siden vår lettere
  • Lettere å holde en rød tråd igjennom nettsiden
  • Lettere å samarbeide med andre

Dere skal lære å bruke SCSS og react sammen

Før vi setter i gang, anbefaler jeg alle å sette i gang et nytt react prosjekt, og tømme det for innhold, slik at alle starter fra scratch

Extensions vi trenger i VSC

  • Live sass compiler
  • Sass

Hvordan komme i gang med SCSS i react?

Vi må laste ned SASS programvaren i prosjektet vårt. Gjør følgende:

  • Åpne terminalen i visual studio code og skriv inn dette:  npm install sass

 

Når sass er lastet ned, vil sass koden vår automatisk bli komprimert til css kode uten at vi trenger å tenke på det.

Når sass er lastet ned, kan vi begynne å sette opp prosjektet

Vi begynner å dele opp koden vår inn i moduler, slik at vi kan eksportere og importere forskjellige filer.

 

Hvordan dere velger å dele opp dokumentene deres, er helt opp til dere selv, men vi tar utgangspunkt i denne mappestrukturen denne forelesningen.

Hver js fil, har sin egen scss fil i samme mappe

Når vi jobber med moduler, blir vi nødt til å importere hver scss fil, inn i js filen for at klassenavnene skal bli lest av.

 Vi henviser til classNames slik som vist over på bildet.

Live tutorial for oppstart av react og sass

Dagens første oppgave

  • Sett opp et nytt react prosjekt, tøm alt av innhold, og installer sass.
  • Deretter skal du sette i gang en components mappe, hvor du kobler sammen js og scss filen slik som forklart på slidene.

 

PS' husk å importere navigasjonen i index.js, slik at den dukker opp

Hva kan vi egentlig gjøre med SCSS koder?

SCSS nesting

SCSS

CSS

Vi lager globale scss filer for vårt prosjekt

Live tutorial av globale scss filer

Dagens andre oppgave

Sett opp globale scss filer, slik som vist i slidene. Dobbelt sjekk at det fungerer slik som det skal.

SASS har en egen dokumentasjon side, som forteller om alt som er mulig å gjøre med dette verktøyet.

 

https://sass-lang.com/documentation/

 

Bruk 10 minutter på å bla igjennom dokumentasjonen

Dere skal nå få trene på å benytte dokumentasjonen

Dagens tredje oppgave

Ved hjelp av sass sin dokumentasjon, les deg opp på hva dette er og hvordan dette fungerer og implementer dette i prosjektet ditt

 

  • Variabler
  • Mixins
  • Mixins med argumenter

Oppsummering

  • Forskjellen på SASS og SCSS
  • Hva fordelene med SCSS er
  • Hvordan sette i gang SCSS i react prosjektet.
  • SCSS nesting
  • Globale SCSS dokumenter
  • SCSS variabler
  • SCSS mixins med og uten argumenter