Moderne CSS med Sass - Praksisveiledning

Takket være CSS forprosessorer kan CSS skrives mye mer effektivt. Hva disse forprosessorene er, hvilke som finnes og hvorfor valget i denne sammenhengen falt på Sass, vises i denne videoen.

Før du kan bruke Sass, må du installere det. Og forutsetningen for dette er Ruby. Begge deler - altså installasjon av Ruby og Sass - blir vist i denne videoen. Deretter kan du umiddelbart teste om Sass-installasjonen faktisk har fungert.

Sass-må konverteres til CSS-filer for at de faktisk kan brukes. Takket være Watch-kommandoen kan du enkelt oppdage endringer i enkeltfiler eller i hele kataloger.

Ved hjelp av @import kan du importere og sette sammen SCSS-filer. Hva alt dette har å gjøre med en understrek foran filnavnet, er et aspekt av denne videoen.

I Sass er det mulig å deklarere variabler. Dette konseptet er som kjent ikke tilgjengelig i vanlig CSS, men er i Sass et genialt middel for effektiv utvikling av stilark.

Takk for nesting, kan Sass-syntaksen holdes mye slankere enn det som er vanlig i CSS. I tillegg hjelper innrykkene deg med å skrive koden mye mer oversiktlig.

Bruken av @extend gjør det mulig for deg å overføre et sett med CSS-egenskaper fra en til en annen selektor. Dette hjelper også med å holde Sass-filene slanke.

Plassholderselektoren muliggjør definisjonen av moduler. Denne modulariseringen tillater oppdelingen av Sass-syntaksen i logiske blokker som kan inkluderes på ulike steder.

Mixins er funksjoner som for eksempel kan gjøre arbeidsprosesser mye enklere. I denne videoen vises det hvordan dere kan definere egne mixins og til slutt bruke dem.

Med selektoren som det handler om i denne videoen, kan du få tilgang til et elements foreldreelement. Denne selektoren eksisterer som kjent ikke i CSS og gir derfor stor verdi.

Sass muliggjør bruk av for-løkker. Dette fungerer veldig enkelt i Sass, og kan for eksempel brukes til å definere et eget rutenettssystem.

Ved siden av For-loops kan man også bruke Each- og While-loops i Sass. Hvordan dette kan brukes til automatisering vises i denne videoen.

I språk som PHP og JavaScript er det mulig å reagere på ulike hendelser ved hjelp av if og else. Dette er faktisk også mulig i Sass. Hvordan dette kan utnyttes, vises i denne videoen.

Dere kan beregne i Sass. Dette er for eksempel praktisk med tanke på definisjonen av skriftstørrelser. Takket være de tilsvarende operatorene kan man også bygge sitt helt eget rutenettsystem.

Selvfølgelig kan farger definert være i Sass. Sass går imidlertid også mye lenger innen dette området enn vanlig CSS. Takket være de tilsvarende funksjonene kan farger for eksempel enkelt manipuleres.

Compass-rammeverket utvider mulighetene til Sass enda mer. Denne første videoen viser hvordan du kan installere og bruke Compass.

Nettsiden til prosjektet Compass er det sentrale informasjonsmiddelet når det gjelder arbeidet med dette rammeverket. Jeg viser dere hvordan dere kan jobbe med dokumentasjonen ved hjelp av CSS3-funksjonene til Compass.

Et eksempel viser hvordan ting lett kan implementeres med Compass. På slutten av denne serien vil det også bli sett på et alternativt Sass-rammeverk. Susy tilbyr et slankt rutenettssystem.