Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Введение SASS: Основы

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


Аватары экспертов Хекслета

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу