如何粉碎嵌套子项 SCSS 元素

问：

.parent{
  .child{
    height:100px;
  }  
}


.parent{
  .child{
    height:200px;
  }  
} /*THIS IS WORKING BUT I DONT WANT*/

.child{
    height:200px; /*THIS IS NOT WORKING*/
}

@media screen and (min-width:768px){
    .child{
        height:200px; /*ALSO THIS IS NOT WORKING*/
    }

    .parent{
      .child{
        height:200px;
      }  
    } /*THIS IS WORKING BUT I DONT WANT*/
}

如何粉碎旧的 .child

我尝试将页面末尾的子项，使用相同的嵌套结构，但我想只使用一个类名，你可以说不使用嵌套子级父结构，但我使用 sass for 更容易阅读。

例