Всем привет! В этом материале рассмотрим, как сделать привязку к родительскому селектору в Sass .
Всем привет! В этом материале рассмотрим, как сделать привязку к родительскому селектору в Sass.
Бывает, что вам нужно расширить селектор, не создавая нового правила. Чтобы это сделать, вы можете привязать к готовому селектору дополнительные селекторы, используя знак амперсанда(&).
Внешне это выглядит, как создание дочернего селектора в иерархии, но с использованием амперсанда мы расширяем именно родительский селектор, а не создаем дочерний. Чтобы стало понятнее, давайте рассмотрим пример.
a
font-weight: bold
text-decoration: none
&:hover
text-decoration: underline
В скомпилированном виде это будет выглядеть следующим образом:
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Очень часто вы можете встретить следующий тип написания названия для классов в HTML: сначала пишут главный класс, а затем его расширяют, поставив тире, и пишут новый класс для дочернего элемента. Например, у нас есть какой-то главный блок, и мы дадим ему идентификатор main. Внутри него находится блок с боковой панелькой, и мы назовем его main-sidebar. Итак, как же нам теперь обратиться к этому блоку, используя Sass? Чтобы каждый раз не писать main, мы можем использовать вместо него знак амперсанда.
#main
color: black
&-sidebar
border: 1px solid
Итак, на этом сегодня все. Спасибо за внимание!
