SCSS Class Tanımlama Tekrar Sorunu | Cevap #4366

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;
  }

}

Böyle daha mantıklı sanki...

.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 {
    width: 300px;
    min-width: 300px;
    background: #333;
    color: #fff;
    transition:all 0.5s;
    display: flex;
    flex-direction: column;
        
    @extend .logo;
    @extend .profile;
  
    &-hidden {
        width: 56px;
        min-width: 56px;
        background: #333;
        color: #fff;
        transition:all 0.5s;
        
        @extend .logo;
        @extend .profile;
        
        &:hover {
            position: absolute;
            left:0;
            top:0;
            height:100%;
            min-height:100%;
            width: 300px;
            min-width: 300px;
            z-index: 1;
        }
    }
}