5

我正在开发一个使用指南针的 moovweb 项目。现在，我正在为精灵实现对 2x 图像的支持。

我正在做的是让指南针生成 1x 精灵，如下所示：

$icons-dimensions: true;
@import "icons/*.png";
@include all-icons-sprites;

然后，在此之后，我将包含并执行 scss 文件，该文件将为 2x 生成 sprite 规则（使用媒体查询）：

@import "../_retina-sprites.scss";
$icons2x: sprite-map("icons2x/*.png");
.icons-logo {
  @include retina-sprite(logo, $icons2x);
}

.icons-bag { @include 视网膜精灵(bag, $icons2x); }

我创建了这个 _retina-sprites.scss （基于Adam Brodzinski 的版本）来包含一个 mixin 来添加媒体查询规则来选择 2x 图像，如下所示：

@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size

@mixin retina-sprite($name, $sprites2x) {
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    & {
      $pos: sprite-position($sprites2x, $name);
      background-image: sprite-url($sprites2x);
      background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
      @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
    }
  }    
}

但是，当在调用的行上生成精灵时，我得到了这个输出sprite-path()：

Syntax error: Unrecognized file type: png'))

这让我认为 compass 正在编写 sprite-url 而不是 sprite-path，因此为'))文件名提供了后缀。

有没有人参与过这个？

4

3 回答 3

4

不确定问题可能是什么，但您可以直接运行 compass 以获得更好的输出或了解正在发生的事情。

moov SDK 使用以下 compass 命令来编译您的资产：

compass compile <my-project-path>/assets --relative-assets --sass-dir stylesheets --css-dir stylesheets/.css --images-dir images --require sass/plugin

希望手动运行可以为您提供更多信息。

于 2013-08-06T08:48:13.427 回答
0

我今天遇到了这个错误。

这实际上是由于空的（如 0kb）PNG 文件

于 2015-02-09T12:53:43.947 回答
0

有趣的是，当我将 JPG 图像与 PNG 放在同一目录中时，我得到了同样的错误。

一旦我删除了那些 JPG，它就起作用了。

于 2013-11-11T14:19:10.840 回答