将边界元法与SASS结合使用时遇到问题

我正在尝试将BEM整合到我的sass中。我也在喝啤酒。当我不使用BEM时，我的代码运行良好。当我加入BEM时，代码不再工作

这是我的HTML，没有BEM

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

这是我使用BEM的HTML

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

---

我是新来的，所以我很确定我错过了一些明显的东西。请让我知道。

我认为这不是边界元问题，而是SASS编译器的“问题”。我不知道你能做这样的类连接。编写sass的方法是寻找一个div，该div在同一元素上有两个独立的类，

stage

和

\u scene

，而不是在嵌套元素上有一个名为

stage\u 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;
    }
  }
}

---

我认为这不是边界元问题，而是SASS编译器的“问题”。我不知道你能做这样的类连接。编写sass的方法是寻找一个div，该div在同一元素上有两个独立的类，

stage

和

\u scene

，而不是在嵌套元素上有一个名为

stage\u 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;
    }
  }
}

我不确定什么“不再有效”。但是您的CSS/SASS代码不符合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;
  }
}

另请参见：。

我不确定什么“不再有效”。但是您的CSS/SASS代码不符合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;
  }
}

另见：