Introduksjon til SASS-språket

I denne opplæringen skal vi lære om preprosessoren SASS. SASS er et alternativ til preprosessoren LESS, som også gjør det mulig å programmere i CSS.

Egentlig har SASS to syntaksalternativer, det første alternativet kalles også SASS, og det andre - SCSS. Begge støtter det samme funksjonssettet og skiller seg bare litt i syntaks. Men siden SCSS er nyere og mer utbredt, vil vi i denne opplæringen fokusere på nettopp det.

Så, SCSS-syntaksen ligner på CSS-syntaksen, det vil si at vi vil se de samme krøllparentesene og de samme anførselstegnene med semikolon som i CSS. La oss se på et eksempel på SCSS-syntaks, hvor vi umiddelbart tildeler en skrifttype og en farge til variabler, og deretter tildeler disse variablene til egenskaper i velgeren body:

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

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