Link Search Menu Expand Document (external link)
teorihandboken

HC 1.5 CSS Pre-processorer

Table of contents

En pre-processor är ett program som tar input, och producerar output som sedan används som input i ett annat program. CSS är ett ganska simpelt och upprepande språk, så det är vanligt att använda pre-processorer för att göra koden enklare, mindre upprepande samt tillföra ytterligare funktionalitet.

Syntax

Olika CSS pre-processorer har olika syntax. Den vanligaste pre-processorna är SASS (Syntactically Awesome Style Sheets) som har två olika syntaxer; SASS och SCSS. SCSS har en syntax som är väldigt lik vanlig CSS, och det går att skriva vanlig CSS i ett SCSS-dokument. Andra pre-processorer är till exempel LESS och Stylus. All kod skriven med pre-processorer kompileras sen till samma syntax i CSS, som sen läses av webbläsaren.

Exempel

Nedan är några exempel med variabler satta med olika pre-processorer, och längst ner är CSS:en de alla kompileras ner till.

SASS 

$size-variable: 16px
p
  font-size: $size-variable

SCSS 

$size-variable: 16px;
p {
  font-size: $size-variable;
}

LESS 

@size-variable: 16px;
p {
  font-size: @size-variable;
}

Stylus 

size-variable = 16px
p
  font-size size-variable

CSS 

p {
  font-size: 16px;
}

LESS och SCSS har väldigt lik syntax, men Sass har mycket mer programatisk funktionalitet än LESS. Stylus skrivs mer likt “vanlig” programmering, men accepterar också vanlig CSS-syntax. Stylus har också, likt Sass, mer programatisk funktionalitet. Det går till exemepl att göra funktioner och uträkningar, att extenda befintliga klasser, göra mixins som tar variabler och sen kan inkluderas i olika deklarationsblock.

Det går också att nesta koden, vilken minskar upprepningar och ökar läsbarheten. Sass har även inbyggda funktioner för att t.ex. hantera färger.

Exempel SCSS 

$Nudes-3: #d9c5b4;
.search-result {
  background-color: lighten($Nudes-3, 13%);
  &:hover {
    background-color: lighten($Nudes-3, 3%);
  }
}

Kompilerad CSS 

.search-result {
  background-color: #efe7e0;
}
.search-result:hover {
  background-color: #decdbe;
}

Kompilering

För att kompilera koden till CSS kan oika verkty användas. I Visual Studio Code kan till exempel en extension läggas till (Live Sass Compiler) som kompilarer din kod till CSS varje gång du sparar. Det går också att använda webpack för att kompilera automatiskt, och många ramverk som till exempel React har redan inbyggt stöd för att kompilera SASS.