Introduktion till SASS-språket

I denna handledning kommer vi att studera preprocessorn SASS. SASS är ett alternativ till preprocessorn LESS, som också möjliggör programmering i CSS.

Egentligen har SASS två varianter av syntax, den första varianten kallas också SASS, och den andra - SCSS. Båda stöder samma uppsättning funktioner och skiljer sig bara lite åt i syntax. Men eftersom SCSS är nyare och mer använd, kommer vi i denna handledning att studera just den.

Så, SCSS-syntaxen liknar CSS-syntaxen, det vill säga vi kommer att se samma klammerparenteser och samma citattecken med semikolon som i CSS. Låt oss titta på ett exempel på SCSS-syntax, där vi omedelbart tilldelar variabler en teckensnitt och en färg, varefter vi tilldelar dessa variabler egenskaper i selektorn body:

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

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