css - 如何使用 Sass 和 BEM 编写修饰符

Question

我真的很困惑如何使用 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;
    }
  }
}

Answer 1

这是你应该在 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);
}

你基本上需要用另一个类 .main-content 说 .page__main-content

这是展示它工作的 fiddle : https://jsfiddle.net/nbqfjcwh/

此外，您的 React 编译器应该将 className 编译为 class - 这就是我认为您看不到结果的原因。