css - 萨斯.scss : Nesting extra class on div

Question

我正在尝试使用简单的 display:none/block 显示 div。单击按钮时，我将 .active 类附加到我的 div。

我不想使用 SASS 定位这个 .active 类，但如果我试图嵌套它，我就做不到。

HTML:

<div class="MyDiv">
   I'm a hidden div. But when some button is clicked I get the class Active
</div>

Javascript

$(".MyDiv").on("click", function() {
  $(this).toggleClass("active");
});

CSS:(SASS 编译后我所期望的)

.MyDiv {
   display:none;
 }

.MyDiv.active {
   display:block; 
 }

SASS

.MyDiv {
  display:none;

  .active {
    display:block; /* this one doesn't work */
  }
}

Answer 1

当你按照你的方式编写时，它会编译成 .MyDiv .active 这不是你想要的，你需要使用 &.active 所以你的选择器将是 .MyDiv.active

.MyDiv {
  display: none;

  &.active {
    display: block;
  }
}