Modern CSS med Sass - Praktisk handledning

Tack vare CSS preprocessorer kan CSS skrivas betydligt effektivare. Vad dessa preprocessorer är, vilka som finns och varför valet i denna serie hamnade på Sass, visas i denna video.

Innan man kan använda Sass måste man installera det. En förutsättning för detta är Ruby. Både installationen av Ruby och Sass visas i den här videon. Därefter kan ni direkt testa om Sass-installationen verkligen har fungerat.

Sass måste konverteras till CSS-filer för att de verkligen ska vara användbara. Tack vare watch-kommandot kan ni enkelt upptäcka förändringar i enskilda filer eller inom hela kataloger.

Med @import kan man importera och sätta ihop SCSS-filer. Vad detta har att göra med en understreck i början av filnamnet är en aspekt av den här videon.

I Sass finns möjligheten att deklarera variabler. Det här konceptet är som känt inte tillgängligt i vanlig CSS, men det är ett genialt verktyg för effektiv utveckling av stylesheets i Sass.

Tack vare nesting kan Sass-syntaxen hållas mycket slankare än vad som är vanligt i CSS. Dessutom hjälper nästlingen er att skriva kod betydligt mer överskådligt.

Användningen av @extend gör det möjligt för er att överföra en uppsättning CSS-egenskaper från en selektor till en annan. Det hjälper också till att hålla Sass-filerna smidiga.

Platshållarväljaren gör det möjligt att definiera moduler. Denna modularisering tillåter uppdelning av Sass-syntax i logiska block som kan inkluderas på olika platser.

Mixins är funktioner som gör det möjligt att avsevärt förenkla arbetsflöden, till exempel. I den här videon visar vi hur ni kan definiera och använda era egna mixins.

Med denna selektor som det handlar om i den här videon, kan du komma åt ett elements föräldraelement. Denna selektor finns som bekant inte i CSS och erbjuder därför ett enormt mervärde.

Sass möjliggör användningen av för-loopar. Det fungerar mycket enkelt i Sass och kan till exempel användas för att definiera ett eget rutnätssystem.

Förutom For-loopar kan du också använda Each- och While-loopar i Sass. Hur detta kan användas för automatisering visas i den här videon.

På språk som PHP och JavaScript finns möjligheten att kunna reagera på olika händelser med if- och else-satser. Något liknande finns faktiskt också i Sass. Hur man kan dra nytta av det visas i den här videon.

Ni kan använd Sass för att beräkna. Det är praktiskt exempelvis när det gäller definitionen av teckenstorlekar. Med hjälp av lämpliga operatorer kan man också bygga sitt helt individuella rutnätssystem.

Självklart kan färger definieras i Sass. Sass går dock betydligt längre än traditionell CSS på detta område. Tack vare de motsvarande funktionerna kan färger till exempel manipuleras på ett mycket enkelt sätt.

Compass-ramverket utvidgar möjligheterna med Sass ytterligare. Det här första videoklippet visar hur ni kan installera och använda Compass.

Projektsidan för Compass är det centrala informationsverktyget när det gäller att arbeta med detta ramverk. Jag visar er hur ni kan arbeta med dokumentationen med hjälp av CSS3-funktionerna från Compass.

Ett exempel visar hur enkelt det är att implementera saker med Compass. I slutet av denna serie kommer det även att kastas en blick på ett alternativt Sass-ramverk. Susy erbjuder ett smidigt grid-system.