我正在尝试使用简单的 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 */
}
}
最佳答案
当你按照你的方式编写时,它会编译成 .MyDiv .active
这不是你想要的,你需要使用 &.active
所以你的选择器将是 .MyDiv.active
.MyDiv {
display: none;
&.active {
display: block;
}
}
关于css - 萨斯.scss : Nesting extra class on div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38280066/