Уроки SASS / SCSS

Полезные ссылки:

1. Курс по языку CSS;
2. Официальный сайт SASS;
3. Редактор Atom.

Что такое SASS?

SASS - это препроцессор, позволяющий писать код для стилей CSS, используя всевозможные: переменные, циклы, миксины, функции и многое другое. 

Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь.

Препроцессор построен на языке Ruby, поэтому для его работы необходимо скачать Ruby и далее использовать терминал или командную строку для превращения SASS в CSS. Сам язык Ruby при этом знать не обязательно, но если вы хотите его изучить, то это можно сделать здесь.

Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.

В чём отличия между SASS и SCSS?

Многие слышали про SASS и SCSS и думают что это разные технологии. На самом деле, обе технологии являются один и тем же и отличаются лишь синтаксисом написания.

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS: 

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
	font: 100% $font-stack
	color: $primary-color

Ниже пример кода на SСSS: 

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

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

В ходе курса мы будем использовать SCSS, так как синтаксис с фигурными скобками более привычен. В случае если вы хотите использовать SASS, то все возможности будут такими же, измениться лишь синтаксис написания кода.