Изучаем Sass. Расширение родительского селектора.

Всем привет! В этой статье мы рассмотрим, как сделать привязку к родительскому селектору в Sass.

Бывает, что вам нужно расширить селектор, не создавая нового правила. Чтобы это сделать, вы можете привязать к готовому селектору дополнительные селекторы, используя знак амперсанда(&).

Внешне это выглядит, как создание дочернего селектора в иерархии, но с использованием амперсанда мы расширяем именно родительский селектор, а не создаем дочерний. Чтобы стало понятнее, давайте рассмотрим пример.

В скомпилированном виде это будет выглядеть следующим образом:

Очень часто вы можете встретить следующий тип написания названия для классов в HTML: сначала пишут главный класс, а затем его расширяют, поставив тире, и пишут новый класс для дочернего элемента. Например, у нас есть какой-то главный блок, и мы дадим ему идентификатор main. Внутри него находится блок с боковой панелькой, и мы назовем его main-sidebar. Итак, как же нам теперь обратиться к этому блоку, используя Sass? Чтобы каждый раз не писать main, мы можем использовать вместо него знак амперсанда.

Итак, на этом сегодня все. Спасибо за внимание!