sass - compass 给出错误无法识别的文件类型 : png'))

Question

我正在开发一个使用 compass 的 moovweb 项目。现在，我正在为 Sprite 实现对 2x 图像的支持。

我正在做的是让 compass 生成 1x Sprite ，如下所示:

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

然后，在此之后，我将包含并执行将生成 2x Sprite 规则的 scss 文件(使用媒体查询):

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

.icons-bag {
@include 视网膜 Sprite (包，$icons2x)；
}

我创建了这个 _retina-sprites.scss(基于 Adam Brodzinski's version)来包含一个 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() 的线路上生成 Sprite 时，我得到了这个输出。 :

Syntax error: Unrecognized file type: png'))

这让我觉得 compass 正在写一个 sprite-url 而不是 sprite-path，因此给出了 '))文件名的后缀。

有没有人参与过这个？

Answer 1

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

moov SDK 使用以下 compass 命令来编译您的 Assets :

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

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