En preprocessor är ett verktyg som utökar CSS:s kapacitet genom att lägga till extra funktioner och egenskaper. Det är en fil med kod som kompileras till CSS. Preprocessorer erbjuder olika funktioner, inklusive variabler, nästling, funktioner, mixins med mera.

Några populära preprocessor-språk för CSS är Sass, Less och Stylus. Dessa preprocessor-språk är utformade för att göra CSS mer effektivt och lättare att arbeta med och används av många utvecklare för storskaliga projekt.

Det finns ingen betydande skillnad mellan dem. Huvudkonceptet är detsamma, så vi kommer att behandla alla fördelar med preprocessorer med sass som exempel.

Fördelar

• Projektstrukturering – Kod kan skrivas i olika filer och mappar vilket gör strukturen ren och förutsägbar;
• Funktionalitet – Kod kan skrivas mer hanterbart och effektivt tack vare ytterligare funktioner i preprocessorn;
• Kompatibilitet – sass-syntaxen är helt kompatibel med befintliga css-regler, vilket möjliggör att färdig css-kod kan inkluderas i en sass-fil, men inte tvärtom.

Nackdelar

• Syntax – Tid behöver läggas på att lära sig syntaxen och vänja sig vid den extra funktionaliteten;
• Kompilering – Ett extra steg krävs för att konvertera sass till css.