Moderne CSS med Sass - Praksisvejledning

Med takket være CSS-præprocessorer kan CSS skrives langt mere effektivt. Hvad disse præprocessorer er, hvilke der findes, og hvorfor valget faldt på Sass i denne sammenhæng, viser denne video.

Før Sass kan bruges, skal det installeres. Og forudsætningen for dette er Ruby. Begge dele – installationen af Ruby og Sass – bliver vist i denne video. Derefter kan I straks teste, om Sass-installationen rent faktisk lykkedes.

Sass skal konverteres til CSS-filer for at de rent faktisk kan bruges. Takket være Watch-kommandoen kan I nemt registrere ændringer i enkelte filer eller i hele mapper.

Ved hjælp af @import kan SCSS-filer importeres og sammenflettes. Hvad alt dette har at gøre med et understreget tegn foran filnavnet, er et aspekt af denne video.

I Sass er der mulighed for at erklære variabler. Dette koncept er - som bekendt - ikke tilgængeligt i almindelig CSS, men det er et genialt værktøj til effektiv udvikling af stylesheets i Sass.

Takket være nesting kan Sass-syntaksen holdes meget slankere end det er sædvanligt i CSS. Skovlen hjælper dig også med at skrive kode langt mere overskueligt.

Brugen af @extend giver dig mulighed for at overføre en sæt CSS-egenskaber fra en til en anden selector. Det hjælper også med at holde Sass-filer slanke.

Placering selector giver mulighed for definition af moduler. Denne modularisering tillader opdeling af Sass-syntaks i logiske blokke, som kan inkluderes på forskellige steder.

Mixin er funktioner, der for eksempel gør arbejdsgange meget lettere. I denne video vises det, hvordan I kan definere jeres egne mixins og til sidst anvende dem.

Med selektoren, der bliver diskuteret i denne video, kan I få adgang til et elements forældreelement. Denne selektor findes som bekendt ikke i CSS og tilføjer derfor en enorm værdi.

Sass muliggør brugen af for-løkker. Dette fungerer meget let i Sass og kan f.eks. anvendes til at definere et eget grid-system.

Ud over For- kan der i Sass også anvendes Each- og While-løkker. Hvordan dette kan bruges til automatisering vises i denne video.

I sprog som PHP og JavaScript er der mulighed for at reagere på forskellige begivenheder ved hjælp af if og else. Det er faktisk også muligt i Sass. Hvordan dette kan bruges, vises i denne video.

I kan regne i Sass. Dette er for eksempel praktisk med hensyn til definitionen af skriftstørrelser. Med de tilsvarende operatorer kan man også opbygge sit helt eget grid-system.

Selvfølgelig kan farver defineres i Sass. Sass går dog også langt ud over almindelig CSS på dette område. Takket være de tilsvarende funktioner kan farver for eksempel manipuleres meget let.

Compass-rammefterjet udvider mulighederne med Sass med mange flere muligheder. Denne første video viser, hvordan I kan installere og bruge Compass.

Compass' projektwebsted er det centrale informationsmiddel, når det kommer til at arbejde med dette framework. Jeg vil vise jer, hvordan I kan arbejde med Dokumentationen ved hjælp af Compass' CSS3-funktioner.

Et eksempel viser, hvor let det er at implementere ting med Compass. I slutningen af denne serie vil der også blive kastet et blik på et alternativt Sass-rammeverk. Susy tilbyder et slankt grid-system.