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

【问题标题】：Scss - Apply siblling css to child elementScss - 将同级 css 应用于子元素
【发布时间】：2019-09-23 04:00:08
【问题描述】：

当父元素具有活动类 uding 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;
      }
    }
}

【问题讨论】：

【解决方案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 立即查看结果。

【讨论】：