Уроки SASS / SCSS

Препроцессор 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 месяца

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

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

Пока комментариев нет