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
Introduksjon til SASS / SCSS
By Camilla Larsen
