Введение в язык SASS

В данном учебнике мы будем изучать препроцессор SASS. SASS - это альтернатива препроцессора LESS, который также позволяет программировать на CSS.

На самом деле SASS имеет два варианта синтаксиса, первый вариант также называется SASS, а второй - SCSS. Оба они поддерживают одинаковый набор функций и лишь немного различаются синтаксисом. Однако, поскольку SCSS является более новым и широко используемым, в данном учебнике мы будем изучать именно его.

Итак, синтаксис SCSS похож на синтаксис СSS, то есть мы увидим те же фигурные скобки и те же кавычки с запятой, что и в CSS. Рассмотрим пример синтаксиса SCSS, где сразу мы присваиваем переменным шрифт и цвет, после чего присваиваем эти переменные свойствам в селекторе body:

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

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