0
Parent of parent in Sass
source link: https://gist.github.com/kvlsrg/49b09e7d9040583cd33576ad0dd299ea
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to get parent of parent in Sass
You can just get it from cached &
. Here is a simple BEM example:
<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;
}
}
}
Output CSS
.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;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK