Как писать модификаторы, используя Sass и BEM - PullRequest
Новая
       28

Как писать модификаторы, используя Sass и BEM

0 голосов
/ 20 июня 2019

Я действительно запутался в том, как использовать область действия с соглашениями Sass и BEM.

У меня есть следующий код: 

<div className="page">
   <div className="page__main-content">
    </div>
</div>

У меня есть условие, которое иногда преобразует приведенный выше код в: 

   <div className="page">
       <div className="page__main-content main-content--active">
        </div>
    </div>

Теперь я хочу представить, что в sass я сделал следующее: 

.page{
  &__main-content{
    min-height: 100vh;
    width: calc(100% - 20em);
    margin-left: 10.9em;
    &--active {
      width: calc(100% - 5em);
    }
  }
}

Но ширина не меняется. Глядя на переданный код, он выглядит так: 

page__main-content main-content--active

Как бы я показал это в Sass?

Я также хочу переопределить ширину (как в активном, так и в неактивном состоянии) 

@media (max-width: 800px) {
  .page{
    &__main-content {
      width: 100% !important;
    }
  }
}

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Так вы должны настроить SASS: 

.page{
  &__main-content{
    min-height: 100vh;
    width: calc(100% - 20em);
    margin-left: 10.9em;

    &.main-content {
      &--active {
        width: calc(100% - 5em);
      }
    }
  }
}

Это компилируется в: 

.page__main-content {
  min-height: 100vh;
  width: calc(100% - 20em);
  margin-left: 10.9em;
}
.page__main-content.main-content--active {
  width: calc(100% - 5em);
}

Вам нужно сказать .page__main-content С другим классом .main-content

Вот скрипка, чтобы показать, как она работает: https://jsfiddle.net/nbqfjcwh/

Кроме того, ваш компилятор React должен компилировать className в class, поэтому я думаю, что вы не видите результатов.

1 голос
/ 20 июня 2019

В вашем примере Sass ваша цель указывает на .page__main-content--active

.page{
  &__main-content{
    &--active {     <-- this means `.page__main-content--active`
      width: calc(100% - 5em);
    }
  }
}

Тем не менее, ваше имя класса main-content--active. Вот почему это не работает.

Возможные решения:

  1. Позвоните на свой узел <div className="page__main-content active"> И нацельтесь на свои стили как это: 
  .page{
      &__main-content{
          &.active {
              width: calc(100% - 5em);
          }
      }
  }
  1. Позвоните на свой узел <div className="page__main-content page__main-content--active"> И нацельтесь на свои стили как это: 
  .page{
      &__main-content{
          &--active {
              width: calc(100% - 5em);
          }
      }
  }

Надеюсь, это поможет.

...