När man skapar webb och kanske lite mer komplex webb, vill man ju såklart att det ska vara så smidigt som möjligt att arbeta fram den som webbutvecklare. Ordinär CSS (Cascading Stylesheets, dvs stilmallen som används för att formge en webbplats) kanske inte alltid känns som det ultimata när man jobbar med stora sajter med mycket stilregler. Du kanske måste återupprepa samma eller liknande CSS på flera olika ställen för önskat resultat. Om du inte redan kan gissa vad jag pratar om så läs vidare.

Kan man arbeta med CSS på något smartare sätt då? Ja, det kan man faktiskt!
Det finns CSS-preprocessors som förlänger funktionaliteten för din CSS. Detta möjliggör att man kan skapa variabler, funktioner, sk. mixins och ytterligare tekniker. Man kan säga att man blandar in programmeringstänk i hur man arbetar med sin stilmall. Man skapar t.ex. en variabel eller funktion som man sedan anropar så att man slipper att återupprepa hela koden varje gång.

De mest kända teknikerna som kan utföra detta är LESS och Sass. Hur de skiljer sig åt går vi inte in på här, men de har liknande möjligheter.

Här visar jag ett exempel på en mixin med Sass för typsnitt:

@mixin font($font) {
font-family: $font;
font-weight: normal;
font-style: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

Sedan anropas denna mixin med t.ex:

body {
@include font($font);
}


Man behöver alltså endast ange @include och sedan anropa sin mixin. I detta fallet är $font en redan satt variabel t.ex. "roboto_slabregular", Helvetica, Arial, sans-serif som man alltså inte heller behöver skriva ut varje gång.

Slutligen måste man konvertera Sass till CSS via något verktyg, t.ex. via terminalkommando eller gratisverktyget Scout. Ett annat tips är CodeKit (endast för Mac).

Detta är en ytterst snabb introduktion, så för fördjupning kika gärna in på ovan nämnda länkar!