Bevezetés a SASS nyelvbe

Ebben az oktatóanyagban a SASS előprocesszort fogjuk tanulni. SASS a LESS előprocesszor alternatívája, amely szintén lehetővé teszi a programozást CSS-ben.

Valójában a SASS-nak két szintaxisváltozata van, az első változatot SASS-nak is hívják, a másodikat pedig SCSS-nek. Mindkettő ugyanazt a funkciókészletet támogatja és csak enyhén különbözik a szintaxis. Azonban, mivel az SCSS újabb és szélesebb körben használt, ebben az oktatóanyagban ezt fogjuk tanulni.

Tehát az SCSS szintaxis hasonló a CSS szintaxishoz, vagyis ugyanazokat a kapcsos zárójeleket és ugyanazokat az idézőjeleket pontosvesszővel látjuk, mint a CSS-ben. Nézzünk meg egy példát az SCSS szintaxisra, ahol azonnal hozzárendelünk egy betűtípust és egy színt változókhoz, majd ezeket a változókat hozzárendeljük a body szelektor tulajdonságaihoz:

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

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