A
A
ABCquestion2022-01-19 16:43:26
Sass
ABCquestion, 2022-01-19 16:43:26

How to work with nested classes of BEM modifier classes in sass?

how to write it in sass ?

.cart-modal-mb {
 top: 0px;  
} 

.cart-modal-mb .cart-modal__inner{
  height: 100vh;
}

.cart-modal {
    position: sticky;
    top: 80px;
    &-mb{
        top: 0px;  
        .&__inner {
            height: 100vh;
        } 
    }
    &__empty {
        margin: auto;
        text-align: center;
    }
    &__inner {
        height: calc( 100vh - 150px);
        min-height: 300px;
        max-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    &__item-list{  
        flex: 1 1 auto;
    }
  
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Nikita Koshik, 2022-01-19
@nikita1711

Let's say there is a class

.intro__photo-img {
      width: 40rem;
      height: auto;
}

This is how it is written in scss:
.intro {
  &__photo {
    &-img {
        width: 40rem;
        height: auto;
    }
}

S
Sergey delphinpro, 2022-01-19
@delphinpro

.cart-modal-mb { // Это отдельный блок в контексте БЭМ!
  top: 0px;  
}

.cart-modal {
  position: sticky;
  top: 80px;
  &__empty {
    margin: auto;
    text-align: center;
  }
  &__inner {
    height: calc( 100vh - 150px);
    min-height: 300px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;

    .cart-modal-mb & {
      height: 100vh;
    }
  }
  &__item-list{  
    flex: 1 1 auto;
  }
}

But maybe it's a modifier?
.cart-modal {
  position: sticky;
  top: 80px;
  &__empty {
    margin: auto;
    text-align: center;
  }
  &__inner {
    height: calc( 100vh - 150px);
    min-height: 300px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  &__item-list{  
    flex: 1 1 auto;
  }

  // Модификатор
  &_mb {
    top: 0px;  
  }
  &_mb &__inner {
    height: 100vh;
  }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question