Sass
Hva er Sass?
Sass (Syntactically awesome style sheets) skal rett og slett være en enklere måte å skape css på. Sass skrives og kjennes ganske likt ut som CSS, men Sass lar deg skape en bedre struktur og oversikt over filene dine. Sass tar også i bruk basis programmeringssyntax som er med på å hjelpe deg lage en mer dynamisk CSS. Den største forskjellen er nok mest at du må pre-prossesere (pakke sammen) Sass filene til CSS før det kan tas i bruk i HTML. Den nyeste syntaxen SCSS (Sassy CSS) skaper blokker av CSS regler fra forskjellige selectorer som er definert gjennom Sass filen. Du kan for eksempel legge flere stilregelsett innihverandre som skal kun gjelde for de elementene som er omsluttet av de elementene som er utenomliggende. Sass kan ha variabler hvor du lager et kodenavn som kan gjenbrukes videre. Dette har hjulpet designere med å endelig kunne løse problemet med den nå kan huske og gjenbruke fargekoder. Det kan selvfølgelig brukes til mer enn farger, men det er et godt eksempel hva variabler er brukbare til. Flere ting er for eksempel funksjoner, endre størrelser i en klasse som kan utvide et annet sett med stilregler, skrive i pseudoklasser og elementer direkte. Når vi snakker om inkluderes i andre , så er sass-fil med CSS/Sass kode som inkluderes i et annet kalt for partials.
Hvorfor Sass framfor vanlig CSS?
Sass er en vanesak som man må venne seg til å bruke ettersom det er litt annerledes forhold til å skrive ren CSS, men Sass er med på å skape en enklere hverdag. For eksempel kan det være med vanlig CSS skriver du kanskje 600 linjer med kode, men hvis du hadde tatt i bruk Sass, så hadde det fortsatt blitt 600 linjer med Css, men du hadde ikke måtte skrevet alle linjene selv. Sass er med på å genere Css kode ut til deg hvor du kanskje kun trenger å skrive 200-300 linjer for og oppnå det resultatet du vil ha, og begynner Css-en å bli ganske lang, så er nok Sass noe du hadde blitt forelsket i når du finner ut at den hadde hjulpet deg på mange måter. Dette er noe designere har lagt seg merke og kanskje det også er noe den vanlige bruker vil bli mer og mer vandt til å ta mer i bruk ettersom man vil spare tid, mer struktur og ting blir enklere. Man skrive så mange partials man vil i Sass og du kan også inkludere andre CSS-filer. Sass filene går gjennom preprossesering og gir deg tilbake en Css fil med det du har skapt gjennom å bruke Sass. Denne filen er det da bare å linke til i HTML som med vanlig CSS filer. De finnes mange programmer for preprossesering, men den enkleste å bruke er nok Scout-App. Jeg kommer hvertfall til å bruke Sass fremover. Skal du?
Min sass struktur har jeg valgt å sortere forskjellige elementer i rettmessige partials, så strukturen blir bedre og du enklere kan endre på enkelte ting uten å måtte lete gjennom hele CSS-en. listeformen jeg har brukt for å lage sass mappen er å lage en mappe kalt sass, inni den lager jeg en mappe som inneholder alle scss stilark jeg lager, og med scout-app preprossesere den ut et egen Css stilark. Det stilarket havner i Sass mappen og er det jeg linker til på nettsiden min i HTMl strukturen. Om ønskelig kan du gjerne laste ned en zippet mappe av Sass mappen min under.
Last ned zippet fil av min sass mappe struktur
Kilder:
- Pdf fra forelesning om Sass - dynamisk CSS