Проблемы с использованием БЭМ с SASS - PullRequest
Новая
       34

Проблемы с использованием БЭМ с SASS

0 голосов
/ 30 января 2019

Я пытаюсь интегрировать БЭМ в мой sass.Я также использую Gulp.Когда я не использую БЭМ, мой код работает нормально.Когда я включаю БЭМ, код больше не работает.

Вот мой HTML без БЭМ. 

<div class="wrapper">
    <ul class="stage">
      <li class="scene">
        <div class="movie">
          <div class="poster"></div>
         </div>
      </li>
   </ul>
</div>

Вот мой SASS 

.wrapper{
  margin: 100px auto;
  max-width: 960px;
  .stage{
    list-style: none;
    padding: 0;
    .scene {
      width: 260px;
      height: 400px;
      margin: 30px;
      float: left;
      perspective: 1000px;
    }
  }
}

Вот мойHTML с использованием BEM 

<div class="wrapper">
        <ul class="stage">
          <li class="stage__scene">
            <div class="movie">
              <div class="poster"></div>
             </div>
          </li>
       </ul>
    </div>

Вот мой SASS с BEM 

.wrapper{
  margin: 100px auto;
  max-width: 960px;
  .stage{
    list-style: none;
    padding: 0;
    &__scene {
      width: 260px;
      height: 400px;
      margin: 30px;
      float: left;
      perspective: 1000px;
    }
  }
}

Я новичок в BEM, поэтому я почти уверен, что упускаю что-то очевидное.Пожалуйста, дайте мне знать.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Я не уверен, что "больше не работает".Но ваш код CSS / SASS не соответствует BEM.БЭМ сознательно ограничивает использование каскадирования.Поскольку блоки независимы, блок (.stage) не должен быть стилизован как потомок другого блока (.wrapper).

Вот код SASS, совместимый с БЭМ: 

.wrapper{
  margin: 100px auto;
  max-width: 960px;
}
.stage{
  list-style: none;
  padding: 0;
  &__scene {
    width: 260px;
    height: 400px;
    margin: 30px;
    float: left;
    perspective: 1000px;
  }
}

См. Также: официальная методология БЭМ .

0 голосов
/ 30 января 2019

Я не думаю, что это проблема БЭМ, но "проблема" с компилятором SASS.Я не знаю, что вы можете сделать объединение классов таким образом.То, как вы написали sass, ищет div с двумя отдельными классами, stage и __scene для одного и того же элемента, а не один класс с именем stage__scene для вложенного элемента.

Ваш sass должен выглядеть так: 

.wrapper{
  margin: 100px auto;
  max-width: 960px;
  .stage{
    list-style: none;
    padding: 0;
    .stage__scene {
      width: 260px;
      height: 400px;
      margin: 30px;
      float: left;
      perspective: 1000px;
    }
  }
}
...