1

我使用指南针创建了一个精灵表：

$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 添加和删除类的情况下最好的方法是什么。我的第一直觉是为所有设备创建一个单独的精灵表，但随后我将不得不在 jquery 中切换类。然后也许我可以将它们合二为一，但是我仍然必须使用 jquery。我可以使用指南针中的更好方法吗？

谢谢

4

2 回答 2

2

如果我理解正确，这段代码可以帮助你。

@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);
  }
}
于 2013-12-11T21:48:35.500 回答
0

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

于 2013-12-11T20:48:06.147 回答