在 Sass 中，我如何根据其父项定位特定子项，然后在媒体查询中使用它？

Question

我正在尝试生成一个 mixin，它应该针对嵌套在 @at-root 中的媒体查询中的父级：

<header> <!-- Should be targeted -->
    <img class="responsive" src="./some/file.jpg" alt="#" />
</header>

<div> <!-- Should be left alone -->
    <img class="responsive" src="./some/file.jpg" alt="#" />
</div>

这是我得到的：

@mixin media { 
    /* arcane magic not important here. */
}

@mixin image-specification() {
    width: auto;
    height: auto;
    @at-root #{&}.responsive {
        max-height:100%;
        max-width: 100%;
        background-repeat:no-repeat;
        background-size: contain;
        background-position:center;
        @include media("<=desktop") {
            @at-root header#{&} {
                max-width: 640px;
                max-height: 360px;
            }
        }
    }
}

这好像不行，我有点卡在这里了。也许这是错误的方法，所以欢迎任何更好的解决方案。

Answer 1

如果使用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();
  }

它编译为：

img {
  width: 100%;
  height: 100%;
}
img.responsive {
  max-width: 100%;
  max-height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (max-width: 320px) {
  header > img.responsive {
    width: 640px;
    height: 360px;
  }
}
@media (min-width: 321px) {
  header > img.responsive {
    width: 910.22px;
    height: 512px;
  }
}
@media (min-width: 1024px) {
  header > img.responsive {
    width: 1280px;
    height: 720px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  header > img.responsive {
    width: 1706.67px;
    height: 960px;
  }
}```

From where I stand, this makes writing sass a whole lot easier moving forward

在 Sass 中，我如何根据其父项定位特定子项，然后在媒体查询中使用它？

How can I, in Sass, target a specific child based on which parent it has, then use it inside media queries?

html

css

sass

responsive-images