Introduktion til SASS-sproget

I denne tutorial vil vi studere præprocessoren SASS. SASS er et alternativ til præprocessoren LESS, som også giver mulighed for at programmere i CSS.

Faktisk har SASS to syntaksvarianter, den første variant kaldes også SASS, og den anden - SCSS. Begge understøtter det samme sæt af funktioner og kun lidt forskellige i syntaks. Men da SCSS er den nyere og mest udbredte, vil vi i denne tutorial studere netop den.

Så, SCSS-syntaksen ligner CSS-syntaksen, det vil sige, vi vil se de samme krøllede parenteser og de samme anførselstegn med semikolon, som i CSS. Lad os overveje et eksempel på SCSS-syntaks, hvor vi straks tildeler en skrifttype og en farve til variabler, hvorefter vi tildeler disse variable til egenskaber i selektoren body:

styles.scss$font: Helvetica, sans-serif;
$color: #333;

body {
  font: $font;
  color: $color;
}