Как в sass работать с вложенными классами классов модификаторов БЕМ?

Question

[ABCquestion]

как это записать в 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;
    }
  
}

Comments

[WapSter]

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

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

В БЭМ нет наследования. Если ты именно так хочешь, то пиши совершенно как захочешь ибо это все равно не по методологии

[ABCquestion]

WapSter, хочу без наследования и без длинных классов ,но так написал чтобы было понятней, а как в sass уйти от наследования ?

[WapSter]

ABCquestion, ты хоть смотрел, что у тебя на выходе с кодом css происходит, прежде чем идти сюда? А то выглядит так, все сделано почти как нужно, но я не хочу проверять результат, а лучше задам вопрос. Либо ты не знаешь, что такое наследование

[Ankhena]

Это .cart-modal-mb и это .cart-modal - разные блоки => вообще находятся в разных файлах.

&__empty
Я вообще сильно против использования & для элементов.
Поиск по проекту становится двухэтапным. Сначала найди файл, потом найди в нем элемент. Хорошо, если нет похожих и вообще не много элементов.

Answer 1

[Нікіта]

Допустим, есть класс

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

Так он записывается в scss:

.intro {
  &__photo {
    &-img {
        width: 40rem;
        height: auto;
    }
}

Comments

[ABCquestion]

но думаю можно прще

.cart-modal {
    $this: &;
    position: sticky;
    top: 80px;
    &-mb{
        top: 0px;  
        #{$this}__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;
    }
  
}

[Сергей delphinpro]

ABCquestion,

Вот так вот &-img никогда в БЭМ не пишется!

Answer 2

[Сергей 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;
  }
}

Но возможно это модификатор?

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