Html 在Sass中，我如何根据某个特定子级的父级将其作为目标，然后在媒体查询中使用它？

我正在尝试生成一个mixin，该mixin应以媒体查询中的父级为目标，该父级嵌套在@at root中：

以下是我得到的：

@mixin媒体{
/*奥术魔法在这里并不重要*/
}
@mixin映像-规范（）{
宽度：自动；
高度：自动；
@根#{&}.响应{
最大高度：100%；
最大宽度：100%；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
@如果使用Sass 3.5，则包含媒体（“），并编写以下代码：

@mixin media($cond) {
    ...
}

@mixin imageDims($height: 100%, $width: 100%) {

    width: $height;
    height: $width;
    @at-root #{&}.responsive {
        max-width: $width;
        max-height: $height;
        background-repeat:no-repeat;
        background-size: contain;
        background-position:center;
        @include media("<=phone") {
            @at-root header > #{&} { // Verbose
                width: 640px;
                height:360px;
            }
        }
        @include media(">phone") {
            header > & { // less verbose
                width: 910.22px;
                height:512px;
            }
        }
        @include media(">=desktop") {
            header > & {
                width: 1280px;
                height:720px;
            }
        }
        @include media("retina2x") {
            header > & {
                width: 1706.67px;
                height:960px;
            }
        }
    }
}

img {
    @include imageDims();
  }

我只是好奇，如果你正在使用类
hero
来做其他事情呢？为什么不为该类添加样式，而不是尝试嵌套所有内容呢？而且，既然没有父选择器这样的东西，怎么会期望它被输出到CSS？不管它必须以
.hero{style}的形式输出
。没有任何东西可以将它与它的子项绑定。很抱歉，它应该只是标记（header、div等）。我想保持它的简短性和可扩展性-这就是为什么我尝试走这条路线的原因。这没关系。问题是CSS中仍然没有父选择器-您仍然会得到
header{style}
或者你误解了我的问题？我的目标是保持干爽，尽可能少地编写代码。我不确定我的答案是否达到了这个目的。