Уроки SASS / SCSS

Урок #3 - Вложенные стили

Урок #3 - Вложенные стили

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

Видеоурок

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


Предположим у вас есть шапка на сайте. Внутри шапки располагается множество элементов и к каждому применяются какие-либо стили и свойства. Для записи всех стилей можно поступить двумя способами:

  1. Прописать все стили по отдельности друг за другом.


Плюсы:

  • Все расположено отдельно друг от друга;


Минусы:

  • Стили разбросаны;
  • Нет вложенности, обращение не к элементам внутри шапки, а сразу ко всем элементам на странице.


  1. Прописать вложенные стили


Плюсы:

  • Все стили принадлежащие к одному объекту находятся внутри одного объекта;
  • Стили не разбросаны;
  • Есть вложенность, поэтому обращение идет лишь к элементам внутри шапки.


Минусы:

  • Нет

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

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

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

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