2

我正在使用SASS/Compass sprite libraray，我正在尝试将我的 sprite 配置为使用 3 种图标大小：1x、1.5x 和 2x（视网膜）

这是文件夹的导入：

@import "icons10/*.png";
@include all-icons10-sprites;
@import "icons15/*.png";
@include all-icons15-sprites;
@import "icons20/*.png";
@include all-icons20-sprites;

这是我正在编写的用于管理这些精灵的 mixin：

@mixin my-icon($name) {
   @extend .icons10-#{$name};
      @media (-webkit-min-device-pixel-ratio: 1.5) {
        @extend .icons15-#{$name};
        background-position: 100% 100%;
      }
      @media (-webkit-min-device-pixel-ratio: 2) {
        @extend .icons20-#{$name};
      }

      $icon-width: icons10-sprite-width($name);
      $icon-height: icons10-sprite-height($name);
      width: $icon-width;
      height: $icon-height;
}

我完全不知道如何管理backround-size以及如何background-position使 1.5x 和 2x 库正常工作。我的问题是：

  1. 这个特定的 SASS 库是否有视网膜解决方案？

  2. 如果我可以自己获取精灵的尺寸，我可以管理我的手动解决方案，但我不明白如何获取整个精灵的尺寸

4

2 回答 2

0

试试这个： https ://gist.github.com/alanhogan/2878758

如果sprite-url不行，你可以试试sprite-file

于 2015-01-28T08:05:09.547 回答
0

到目前为止，SASS 中还没有这样的内置解决方案。但是如果你愿意切换到精灵图，有一种方法可以获取精灵图的大小：

background-size: image-width(sprite-path( [your sprit emap] )) image-height(sprite-path( [your sprite map] ))

Gaya Kessler有一段很棒的关于用于指南针的视网膜精灵的代码，您应该查看：Retina Sprites for Compass。
添加第三个图标大小应该不是问题。

于 2013-12-14T19:43:41.793 回答