Sass .scss：在div上嵌入额外的类

Question

我正在尝试使用简单div显示display:none/block。单击按钮后，我会将.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;
  }
}

Answer 2

您没有正确使用Sass。如果你想为MyDiv建立另一个兄弟类，你需要在Sass中使用＆amp; .active。 Link to Css-Tricks

.MyDiv {
  display:none;
  &.active {
    display:block;
  }
}

它编译为

.MyDiv.active {
  display: block;
}

您的代码编译为。你看到.MyDiv和.active

之间的空格

.MyDiv .active {
  display: block;
}