Введение — SASS: Основы работы

• SASS или SCSS
• Практика
• CodePen

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

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты