Изучение препроцессора SASS / SCSS

6 уроков Консультации

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

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


CSS3HTML5

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

Видео урок:

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


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

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


Плюсы:

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


Минусы:

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


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


Плюсы:

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


Минусы:

  • Нет

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

sass-lesson-3.zip Необходима подписка!

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

Исходный код

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

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

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

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

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


CSS3HTML5

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