SCSS

by khamer

HTML

<nav class="pagination">
  <ul class="pagination__list">
    <li class="pagination__item -previous"><a href="#" class="pagination__link">Previous</a></li>
    <li class="pagination__item -active"><a href="#" class="pagination__link">1</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">2</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">3</a></li>
    <li class="pagination__item -next"><a href="#" class="pagination__link">Next</a></li>
  </ul>
</nav>

SCSS

@mixin pagination {
  &__item:hover &__link {
    color: gold;
  }
  
  &__item.-active {
    color: black;
  }
}

.pagination {
  @include pagination;
}