有效地迭代视网膜和非视网膜图像的sass变量列表

Question

我即将弄清楚这一点，但我不知道这应该是大量的媒体查询还是一个媒体查询中的所有内容。

以下是国家列表：

$countries: global at au be br ca ch cn cz de dk es fi fr gb hu id il in it jp kr kz my nl no nz ph pl pt rs ru se sg sk tr tw ua us;

我将根据以下列表迭代我的Scss以输出国家/地区标志：

@for $i from 1 through length($countries) {
    $country: nth($countries, $i);
    .flag-#{$country} {
        background-image: url("//website.com/images/flags/flag_#{$country}.png");
    }
}

这给了我一个我想要的输出：

.flag-global {
  background-image: url("//website.com/images/flags/flag_global.png");
}
.flag-at {
  background-image: url("//website.com/images/flags/flag_at.png");
}
.flag-au {
  background-image: url("//website.com/images/flags/flag_au.png");
}
[...]

我需要另一个视网膜版本图像的列表，以便输出将2x附加到视网膜版本的每个图像：

@media (-webkit-min-device-pixel-ratio:2) and (min--moz-device-pixel-ratio:2) and (-o-min-device-pixel-ratio:2/1) {
    // Required dimensions shouldn't be included in loop but needs to be in this media query
    .flag {
        background-size: 23px 17px
    }
    .flag-global {
      background-image: url("//website.com/images/flags/flag_global2x.png");
    }
    .flag-at {
      background-image: url("//website.com/images/flags/flag_at2x.png");
    }
    .flag-au {
      background-image: url("//website.com/images/flags/flag_au2x.png");
    }
    [...]
}

我不确定只有一个@for循环的最佳方法是什么。

Answer 1

就像cimmanon提到的那样，您可以将媒体查询放入循环中，它将生成retina类和普通类。

.flag {
  background-size: 17px 12px; // non-retina
  @media (-webkit-min-device-pixel-ratio:2) and (min--moz-device-pixel-ratio:2) and (-o-min-device-pixel-ratio:2/1) {
    & {
      background-size: 23px 17px
    }
  }
}
$countries: global at au be br ca ch cn cz de dk es fi fr gb hu id il in it jp kr kz my nl no nz ph pl pt rs ru se sg sk tr tw ua us;
@for $i from 1 through length($countries) {
    $country: nth($countries, $i);
    .flag-#{$country} {
        background-image: url("//website.com/images/flags/flag_#{$country}.png");
        @media (-webkit-min-device-pixel-ratio:2) and (min--moz-device-pixel-ratio:2) and (-o-min-device-pixel-ratio:2/1) {
          & {
            background-image: url("//website.com/images/flags/flag_#{$country}2x.png");
          }
        }
    }
}

如果您关心所有媒体查询，并且希望将它们组合在一起，则可以使用sass-media_query_combiner插件，该插件可以将所有媒体查询组合在一起。