1

是否有标准方法来缩放由指南针创建的所有精灵？也就是说，有一个图像是我需要的分辨率的两倍，我希望该图像中的所有精灵都具有大小。目前我可以通过迭代加载的精灵并设置background-size和修改background-position.

为了清楚起见，例如，如果我使用正常大小的精灵，我会这样做：

@import "settings/*.png";
@include all-settings-sprites;

但要获得双倍大小的精灵，我必须这样做：

@import "icons/*.png";
@include retina-sprites($icons-sprites); // retina sprites

@mixin retina-sprites($map) {
    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {
      background-image: sprite-url($map);
      @include background-size(ceil(image-width(sprite-path($map)) / 2) auto);
    }

    @each $sprite in sprite-names($map) {
      .#{$base-class}-#{$sprite} {
        @extend .#{$base-class}-all-retina-sprites;

        $position: sprite-position($map, $sprite);
        background-position: nth($position, 1) nth($position, 2) / 2;
      }
    }
}

我希望有一种更简单或标准的方法来做到这一点。当我尝试在其他地方的 CSS 文件中包含单个精灵时，问题变得更糟，因为我不能使用任何标准定义。

4

0 回答 0