Введение

Перед тем, как погрузиться в тему препроцессоров, необходимо понять, какие проблемы они призваны решить. CSS — достаточно сложный язык, так как в нём отсутствуют вложенности селекторов друг в друга, невозможно наследовать стили между различными селекторами, когда-то в нём не существовало даже переменных. И если с переменными вопрос уже решён, то отсутствие вложенности, функций, наследования делает CSS код трудночитаемым и неоправданно объёмным.

Для решения этих проблем были созданы препроцессоры, которые являются надстройками над CSS. Это важно, потому что сами по себе препроцессоры не дадут сделать того, чего нельзя сделать в CSS. В конце концов файлы с кодом препроцессора будут преобразованы в обычный .css файл.

В этом курсе мы изучим популярный препроцессор SASS, с помощью которого научимся:

  • Не дублировать код.
  • Использовать шаблоны.
  • Создавать свои функции.
  • Генерировать стили.
  • Использовать наглядную вложенность.
  • Работать с условными конструкциями.

Всё это позволит писать поддерживаемый код, который будет автоматически переводиться в обычный .css.

SASS или SCSS

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

  • Sass. Этот синтаксис не использует фигурные скобки и точки с запятой. Есть ещё отличия, но о них можно подробнее узнать в документации.
  • SCSS. Этот синтаксис в большей своей части копирует синтаксис обычного CSS.

Сравните два кода:

Sass

.flex
  display: flex

  &.justify-center
    justify-content: center

SCSS

.flex {
  display: flex;

  &.justify-center {
    justify-content: center;
  }
}

Оба этих варианта скомпилируют один и тот же код:

.flex {
  display: flex;
}

.flex.justify-center {
  justify-content: center;
}

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

Практика

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

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

CodePen

Другой возможностью применить навыки, полученные при работе с курсом — использование сервиса codepen. Вы можете создать свой pen и в настройках CSS указать использование препроцессора SASS.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →