SASS / SCSS

7 уроков
77 заданий
Препроцессор SASS / Урок #1 - Что такое SASS, SCSS. Установка

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

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 месяца

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

Изучение CSS/CSS3 от нуля до гуру!
15 уроков
Современная вёрстка адаптивного веб-сайта
Видеокурс по PHP, MySQL / Создание динамического сайта
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Создание адаптивного сайта
4 урока
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков