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;
}
(感谢Sergey Kovalenko发送此技巧!)
意味着它允许您同时在选择器中使用.parent
和.parent--elem
。 有点深奥,但有时可能有用。 避免了可能需要使用@ at-root完全退出并重新生成选择器的情况。
<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;
}
翻译自: https://css-tricks.com/snippets/sass/caching-current-selector-sass/