Въведение в езика 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;
}