Question

我正在尝试将BEM集成到我的Sass中。我也在用Gulp。当我不使用BEM时，我的代码可以正常工作。当我包含BEM时，该代码将不再起作用。

这是我的没有BEM的HTML。

<div class="wrapper">
        <ul class="stage">
          <li class="stage__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;
    }
  }
}

这是我使用BEM的HTML

{{1}}

这是我在BEM的SASS

{{1}}

我是BEM的新手，所以我很确定自己缺少明显的东西。请让我知道。

Answer 1

我不确定什么“不再起作用”。但是您的CSS / SASS代码不符合BEM。 BEM故意限制级联的使用。由于块是独立的，因此不应将块（.stage）设置为另一个块（.wrapper）的后代。

以下是符合BEM的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;
  }
}

另请参阅：the official BEM methodology。

Answer 2

我认为这不是BEM问题，而是SASS编译器的“问题”。我不知道您可以像这样进行类连接。编写Sass的方式是在同一个元素上查找具有2个单独的类stage和__scene的div，而不是在嵌套元素上使用名为stage__scene的单个类。

您的无礼状态如下：

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

BEM与SASS一起使用时出现问题

2 个答案: