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

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

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

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

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

Введение

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

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

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

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

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

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

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

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