3

lessURL 経由で画像を参照するファイルを含むプロジェクトがあります。プロジェクトは、すべての JS が縮小され、1 つのファイルとして送信される単一ページのアプリケーションとしてユーザーに配信されます。ただし、画像は別のファイルで送信されます。この待ち時間をなくすために、画像を 1 つのファイルで配信したいと考えています。(非手動の方法で) 画像をスプライトし、スプライトされた画像を参照するように変更するにはどうすればよいlessですか?

4

1 に答える 1

3

スプライト CSS セレクターを、スプライト シートと同時に生成される独自のファイルに分割できます。私はSpriteRightを使用していますが、その猫の皮を剥ぐ方法はたくさんあります。必要に応じて、 Glueというコマンド ライン ツールを使用できます。スプライトの Less/CSS ファイルを取得したら、それをメインの Less ファイルに再度インポートすると、機能するはずです。

したがって、セットアップは次のようになります。

  • /以下
    • メインレス
    • sprite.less
  • /css
    • main.css (コンパイルおよび連結された Less ファイル)
  • /img
    • /_for-スプライト
      • ... (スプライト シートを構成する画像)
    • sprite.png

main.less:

... (snip) ...
@import 'sprite.less';
... (snip) ...

sprite.less (上記のリンクのユーティリティによって生成):

... (snip) ...
.icon1 { background-position: 0 0; }
.icon2 { background-position: 20px 20px }
... (snip) ...

私の説明が理にかなっていることを願っています。私は毎日これに非常に似たようなことをしていますが、うまくいきます。

于 2012-11-04T02:05:32.010 に答える