Úvod do jazyka SASS

V tomto učebnom texte budeme študovať preprocesor SASS. SASS je alternatívou k preprocesoru LESS, ktorý tiež umožňuje programovať v CSS.

SASS má v skutočnosti dve varianty syntaxe, prvá varianta sa tiež nazýva SASS, a druhá - SCSS. Obe podporujú rovnakú sadu funkcií a len sa mierne líšia syntaxou. Avšak, pretože SCSS je novší a široko používaný, v tomto učebnom texte ho budeme študovať.

Takže, syntax SCSS je podobná syntaxi CSS, to znamená, že uvidíme rovnaké zložené zátvorky a rovnaké úvodzovky s bodkočiarkou ako v CSS. Pozrime sa na príklad syntaxe SCSS, kde okamžite priradíme premenným font a farbu, potom priradíme tieto premenné vlastnostiam v selektore body:

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

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