css - Scss - 将同级 css 应用于子元素

Question

当父元素具有事件类 uding scss 时，我尝试在子元素上设置显示 block 。

我需要 SCSS 的 CSS-

.menu-item{
  display:block;
}
.menu-item-body{
  display:none;
}
.menu-item.active .menu-item-body{
  display:block;
}

SCSS 什么试试--

.menu-item {
     display:block;

  &-body{
     display:none;
  }

   &.active {
      &-body{
         display:block;
      }
    }
}

Answer 1

.menu-item {
  display: block;
}
.menu-item-body {
  display: none;
}
.menu-item.active .menu-item-body{
  display: block;
}

在 SCSS 中是:

.menu-item {
  display:block;
  &-body {
    display:none;
  }
  &.active &-body {
    display:block;
  }
}

使用 SASS playground立即查看结果。