如何使用 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--active

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

但是，您的 class 名字是 main-content--active。这就是它不起作用的原因。

可能的解决方案：

调用你的节点<div className="page__main-content active"> 并像这样定位您的风格：

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

调用你的节点<div className="page__main-content page__main-content--active"> 并像这样定位您的风格：

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

希望对您有所帮助。

Answer 2

这是您在 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 class .main-content

这里 fiddle 展示了它的工作原理： https://jsfiddle.net/nbqfjcwh/

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

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

How to Write Modifiers using Sass and BEM

css

sass

bem