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

我很快就能弄明白这一点，但我不知道这应该是大量的媒体查询还是一个媒体查询中的所有内容

以下是国家列表：

$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;

我将迭代我的SCS，根据以下列表输出国家标志：

@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

循环来实现这一点的最佳方法是什么。

就像cimmanon提到的那样，你可以将媒体查询放在循环中，它将生成视网膜类和正常类

.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仅在编译时运行，因此代码是否是最有效的代码并不重要，因为它只需要运行一次。我知道我可以用两个

@for

循环来实现这一点，但我只是想有一种简单的方法将代码合并到一个循环中。但如果这不是一个简单的方法，至少我有一个备份解决方案。你可以对每个标志进行单独的周围媒体查询，并在一个循环中执行，但这将导致编译的CSS文件更大，用户浏览器的性能可能更差（没有太多，但是，有两个@for循环也不会降低性能。）问题是你有什么，确切地说是什么？@cimmanon我想找到一种方法，将媒体查询处理到原始的

@for

循环中，而不必写出其中两个。