Увод у језик SASS

У овом упутству ћемо учити препроцесор SASS. SASS је алтернатива препроцесору LESS, који такође омогућава програмирање у CSS-у.

Заправо, SASS има две варијанте синтаксе, прва варијанта се такође назива SASS, а друга - SCSS. Оба подржавају исти скуп функција и само се мало разликују у синтакси. Међутим, пошто је SCSS новији и шире коришћен, у овом упутству учићемо управо њега.

Дакле, синтакса SCSS је слична синтакси CSS-а, то ће рећи, видећемо исте витичасте заграде и исте наводнике са зарезом, као и у CSS-у. Размотримо пример синтаксе SCSS, где одмах додељујемо променљивим фонт и боју, након чега додељујемо те променљиве својствима у селектору body:

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

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