SCSS Class Tanımlama Tekrar Sorunu

coder 1335 gün önce

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

}

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

coder

1331 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.

#004384

ugurozgen

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

#004366

makifgokce

1335 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

#004334