sass - Gumby SCSS フレームワーク - Retina 背景画像に Respond を使用する

Question

Gumby フレームワークでの応答ミックスインの操作に関する非常に具体的な質問です。

CSS で Retina 背景画像を正しく機能させるには、respond mixin ( http://gumbyframework.com/docs/mixins/#!/respond ) を使用し、「min-device-pixel-ratio」属性を渡す必要があります。 .

ガムビーでの応答がこれを行うように設定されているとは思いませんが、ここの誰かが試したのでしょうか? 従来のメディア クエリを使用するのは簡単ですが、フレームワーク フックを可能な限り使用し、コードベースを軽量に保ちたいと考えています。

洞察はありますか？以下のコード サンプル - これは、SCSS でこれをフォーマットする方法だと思います。

  //bg image + container
  .hero-background {
    background: url('../images/image.png') no-repeat bottom center;
    height: 100%;
    margin-top: -2em; 
    min-height: 53em;
    min-width: 100%;

    //for retina background images in Gumby, not sure if this works
    @include respond("min-device-pixel-ratio: 2") {
      background: url('../images/image.png') no-repeat bottom center; 
      background-size: 1429px 538px;
    }

これは私がCSS出力のために得るものです

.hero-background {
    background:url(../images/GT_web_trucks_bwphoto.png) no-repeat bottom center;
    height:100%;
    margin-top:-2em;
    min-height:53em;
    min-width:100%
}

@media only screen and (min-device-pixel-ratio:2){
    .hero-background {
        background:url(../images/GT_web_trucks_bwphoto@2x.png) no-repeat bottom center;
        background-size:1429px 538px
    }
}