Wprowadzenie do języka SASS

W tym tutorialu będziemy uczyć się preprocesora SASS. SASS to alternatywa dla preprocesora LESS, który również pozwala programować w CSS.

W rzeczywistości SASS ma dwie wersje składni, pierwsza wersja również nazywa się SASS, a druga - SCSS. Oba wspierają ten sam zestaw funkcji i tylko nieznacznie różnią się składnią. Jednakże, ponieważ SCSS jest nowszy i szerzej używany, w tym tutorialu będziemy uczyć się właśnie jego.

A więc, składnia SCSS jest podobna do składni CSS, to znaczy zobaczymy te same nawiasy klamrowe i te same cudzysłowy z średnikami, co w CSS. Rozważmy przykład składni SCSS, gdzie od razu przypisujemy zmiennym czcionkę i kolor, po czym przypisujemy te zmienne właściwościom w selektorze body:

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

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