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

【问题标题】：How to Write Modifiers using Sass and BEM如何使用 Sass 和 BEM 编写修饰符
【发布时间】：2019-11-03 15:51:41
【问题描述】：

我真的很困惑如何将范围与 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;
    }
  }
}

【问题讨论】：

在sassmeister.com 中看起来不错。你是编译 sass 还是 scss？
第一个块中的 sass 编译为 .page__main-content--active。您需要为main-content--active 设置新规则，例如.main-content { &--active {}}

标签： css sass bem

【解决方案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);
}

你基本上需要说.page__main-content WITH another class .main-content

这是显示它工作的小提琴： https://jsfiddle.net/nbqfjcwh/

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

【讨论】：

你确定吗？你的编译成什么？将我写的 SASS 粘贴到 sassmeister.com 中。它与我所拥有的相得益彰，它将以page__main-content main-content--active 作为类来定位您的元素。
更多关于 CSS 模块的阅读 - stackoverflow.com/questions/49212843/…
做了很多调试，我的支架放错地方了。谢谢！

【解决方案2】：

在您的 Sass 示例中，您的目标指向 .page__main-content--active

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

但是，您的班级名称是 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);
          }
      }
  }

希望对你有帮助。

【讨论】：