Изучение препроцессора SASS / SCSS

7 уроков Консультации

Препроцессор SASS / Урок #1 - Что такое SASS, SCSS. Установка

Препроцессор SASS / Урок #1 - Что такое SASS, SCSS. Установка


CSS3HTML5

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

Видео урок:

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

  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, то все возможности будут неизменными, измениться лишь синтаксис написания кода.

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


CSS3HTML5

Также стоит посмотреть