Question

我真的对如何在Sass和BEM约定中使用范围感到困惑。

我有以下代码：

POST

我有一个条件，有时会将上面的以下代码转换为：

https

现在，我想用sass来表示我做了以下事情：

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

Answer 1

在您的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);
          }
      }
  }

希望有帮助。

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说.main-content

以下是显示其工作方式的小提琴： https://jsfiddle.net/nbqfjcwh/

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

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

2 个答案: