5

コンパスを使用する moovweb プロジェクトに取り組んでいます。現在、スプライトの 2x イメージのサポートを実装しています。

私がやっていることは、次のようにコンパスに 1x スプライトを生成させることです。

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

そして、この直後に、2x のスプライト ルールを生成する scss ファイルを含めて実行します (メディア クエリを使用)。

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

.icons-bag { @include retina-sprite(bag, $icons2x); }

この _retina-sprites.scss ( Adam Brodzinski のバージョンに基づく) を作成して、次のように 2x 画像を選択するためのメディア クエリ ルールを追加する mixin を含めます。

@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'))

'))これにより、コンパスはスプライトパスではなくスプライトURLを書き込んでいるため、ファイル名に接尾辞が付けられていると思います。

誰かが前にこれに入ったことがありますか？

4

3 に答える 3

4

何が問題なのかはわかりませんが、コンパスを直接実行して、何が起こっているかについてより良い出力や洞察を得ることができます。

moov SDK は、次のコンパス コマンドを使用してアセットをコンパイルします。

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

おかしなことに、PNG と同じディレクトリに JPG 画像があると、同じエラーが発生しました。

それらのJPGを削除すると、うまくいきました。

于 2013-11-11T14:19:10.840 に答える
0

今日、このエラーが発生しました。

これは、実際には空の (0kb のような) PNG ファイルが原因でした。

于 2015-02-09T12:53:43.947 に答える