v2.5.2
Giriş yap

SCSS Class Tanımlama Tekrar Sorunu

coder
571 defa görüntülendi

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

}
Cevap yaz
Cevaplar (3)
coder
1093 gün önce

@extend kullanırken & kullanamıyor muyuz?
Örneğin logo classının main-sidebar classı içerisinde olduğunu nasıl belirteceğiz scss'de.

ugurozgen
1094 gün önce

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;
        }
    }
}
makifgokce
1096 gün önce

sass pek bilgim yok ama @extend diye bişey var
aşağıdaki linkten örneklerine bakabilirsin.
https://sass-lang.com/documentation/at-rules/extend