Кэширование текущего селектора (&) в Sass онлайн урок.


& amp; Символв Sass уникален тем, что он представляет текущий селектор. Он меняется, когда вы гнездились. Предположим, вы вложенные, но вы хотите, чтобы доступ к селектору поддерживал немного вложенности. Хитрость заключается в кешировании и усилении. и использовать его глубже в гнезде.Подобно:

.parent {

$this: &;

&--elem {
display: inline-block;

&:hover,
#{$this}__variation--active &
{
background: red;
}

}

}

Что компилируется:

.parent--elem {
display: inline-block;
}
.parent--elem:hover, .parent__variation--active .parent--elem {
background: red;
}

(Спасибо Сергею Коваленко за отправку этого трюка!)

Смысл этого позволил вам одновременно использовать.parentи.parent - elemв селекторе одновременно. Маленькая эзотерика, но иногда может быть полезна. Способы устранения ситуаций, когда вам может понадобиться использовать @ at-root, чтобы полностью отбросить и переделать селектор.

В gist Сергея есть примеры, которые основаны на BEM :

<ul class="pagination">
<li class="pagination__item">
<a class="pagination__link" href="#">
Page 1
</a>
</li>
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#">
Page 2
</a>
</li>
</ul>

$gray-very-light: #ccc;

.pagination {
display: flex;
padding: 0;
list-style: none;

$this: &;

&__item {
border: 1px solid $gray-very-light;

& + & {
margin-left: .5rem;
}
}

&__link {
display: block;
padding: .25rem .5rem;
text-decoration: none;

&:hover,
#{$this}__item--active &
{ // Here we get .pagination from $this variable
background-color: $gray-very-light;
}
}
}

Вывод:

.pagination {
display: flex;
padding: 0;
list-style: none;
}

.pagination__item {
border: 1px solid #ccc;
}

.pagination__item + .pagination__item {
margin-left: .5rem;
}

.pagination__link {
display: block;
padding: .25rem .5rem;
text-decoration: none;
}

.pagination__link:hover,
.pagination__item--active .pagination__link
{
background-color: #ccc;
}