Scss - применить siblling css к дочернему элементу

Question

Я пытаюсь установить блок отображения на дочернем элементе, когда родительский элемент имеет активный класс uss scss.

CSS, что мне нужно от SCSS-

.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 , чтобы мгновенно увидеть результаты.