Merhaba.
SCSS ile alakıl bir sorum var.

Aşağıda gördüğünüz gibi main-sidebar ve main-sidebar-hidden şekline classlar var ve bunların içerisinde de logo ve profile classları tanımlı.

Bu logo ve profile classlarını iki class içerisinde tekrar yazmanın yanlış olduğunu düşünüyorum. Aşağıdaki kodun sağlıklı hali nasıl olmalı?
SCSS de buna uygun çözüm nedir?

.main-sidebar {
  width: 300px;
  min-width: 300px;
  background: #333;
  color: #fff;
  transition:all 0.5s;
  display: flex;
  flex-direction: column;

  & .logo {
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid #4b545c;
    padding-left: 10px;
    display: flex;
    align-items: center;

    & i {
      margin-right: 10px;
    }

  }

  & .profile {
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid #4b545c;
    padding-left: 10px;
    display: flex;
    align-items: center;

    & i {
      margin-right: 10px;
    }

  }

}

.main-sidebar-hidden{
  width: 56px;
  min-width: 56px;
  background: #333;
  color: #fff;
  transition:all 0.5s;

  & .logo {
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid #4b545c;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    & i {
      margin-right: 10px;
    }

  }

  & .profile {
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid #4b545c;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    & i {
      margin-right: 10px;
    }

  }

  &:hover {
    position: absolute;
    left:0;
    top:0;
    height:100%;
    min-height:100%;
    width: 300px;
    min-width: 300px;
    z-index: 1;
  }

}