Question

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

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

这是大约11个图标，工作正常。

当我需要使用简单的include来调整类时，我也有部分内容： @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。我可以使用罗盘的更好方法吗？

谢谢

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

指南针精灵和响应图像

2 个答案: