Introduzione al linguaggio SASS

In questo tutorial studieremo il preprocessore SASS. SASS è un'alternativa al preprocessore LESS, che anch'esso consente di programmare in CSS.

In realtà SASS ha due varianti di sintassi, la prima variante è chiamata anch'essa SASS, mentre la seconda - SCSS. Entrambe supportano lo stesso set di funzionalità e differiscono solo leggermente nella sintassi. Tuttavia, poiché SCSS è più recente e ampiamente utilizzato, in questo tutorial studieremo proprio quello.

Quindi, la sintassi SCSS è simile alla sintassi CSS, cioè vedremo le stesse parentesi graffe e gli stessi punti e virgola tra le virgolette, come in CSS. Consideriamo un esempio di sintassi SCSS, dove immediatamente assegniamo a delle variabili un font e un colore, dopo di che assegniamo queste variabili alle proprietà nel selettore body:

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

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