指南针、精灵和响应图像

Question

我用指南针制作了一张雪碧纸：

$roundedicons-layout:smart;
@import "roundedicons/*.png";
@include all-roundedicons-sprites;

这是大约11个图标，工作良好。

当我需要通过简单的包含:用于移动、平板和桌面的@include respond-to(phone) { width: 100% ;}来调整类时，我也有这样的部分：

$break-desktop: 1024px;
$break-tablet: 720px;
$break-phone: 320px;

@mixin respond-to($media) {
  @if $media == phone {
    @media only screen and (max-width: $break-phone) { @content; }
  }
  @else if $media == tablet {
    @media only screen and (min-width: $break-phone + 1) and (max-width: $break-desktop - 1) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-desktop) { @content; }
  }
}

我目前面临的问题是，每个设备(桌面、平板和移动设备)的图标图像都有3种不同的大小。此外，我还必须支持IE8，所以我不能缩放背景图像。我很好奇，在不使用一堆jquery来添加和删除类的情况下，最好的方法是什么。我的第一反应是为所有设备创建一个单独的sprite表，但随后我将不得不在jquery中切换类。然后，也许我可以将它们合并成一个，但是我仍然需要使用jquery。我能用更好的指南针吗？

谢谢

Answer 1

如果我明白的话，这个代码可以帮到你。

@import "compass";

//generated sprite for every device
$iconsSmall: sprite-map("icons/small/*.png");
$iconsMedium: sprite-map("icons/medium/*.png");
$iconsBig: sprite-map("icons/big/*.png");

//common class for all icons
.icons{
  @include respond-to(phone){
    background: $iconsSmall;
  }

  @include respond-to(tablet){
    background: $iconsMedium;
  }

  @include respond-to(desktop){
    background: $iconsBig;
  }
}

//for example icons name: close.png
.icon-close{
  @include respond-to(phone){
    background-position: sprite-position($iconsSmall, close);
  }

  @include respond-to(tablet){
    background-position: sprite-position($iconsMedium, close);
  }

  @include respond-to(desktop){
    background-position: sprite-position($iconsBig, close);
  }
}

Answer 2

我刚刚想出了一个使用sass：https://gist.github.com/apauly/7917906的响应精灵的解决方案。