コンパスを使用して css sprite_html/css_WEB-ITnose を自動的に綴ります

コンパスを使用して CSS スプライトを自動的に組み立てる

css スプライト (css スプライト) は、css スプライトとも呼ばれ、画像の接合技術です。これは主にアイコンに使用され、複数のアイコンを 1 つの画像に結合します。ページが読み込まれるときに、組み立てられた画像を読み込んでから、背景の位置と幅と高さを使用してさまざまなアイコンを表示するだけです。これを行うと、ページリクエストの数が減ります。しかし、PSD からアイコンを切り離し、それらを 1 つの写真に結合し、後で背景の位置を計算することを考えるのは本当に夢中になります。背景の位置を再度計算すると、それは本当に大きな間違いです。

この時間のかかる手作業は自動化する必要があります。この記事では、コンパスを使用して CSS スプライトを自動的に綴る方法を紹介します。

コンパスをインストールする

ここでのインストールと設定については、私の別の記事、SASSの使い方の紹介を参照してくださいので、ここでは紹介しません。 Compass は Sass と組み合わせて使用​​されることが多く、CSS の記述効率を向上させるために定期的に Sass を使用することをお勧めします。

合成 CSS スプライト

まず、config.rb ファイルにいくつかの変更を加えます:

# Get the directory that this configuration file exists indir = File.dirname(__FILE__)#Compass configurationsass_path = dircss_path = File.join(dir, "..", "css")images_dir = "../img"environment = :production # :development # :productionoutput_style = :compact # :expanded # :compressed

ここでの主なことは、image_dir 項目を追加することです。
次に、sass ファイル tmp.scss を追加します。

@import "compass/utilities/sprites";    @import "tmp/*.png";                    @include all-tmp-sprites; 

ここの最初の行は、compass のスプライト モジュールをロードすることです。
2 行目は、すべての png ファイルを tmp ディレクトリにまとめることを意味します。ここでの tmp は、sprite_load_path 項目が設定されていない場合、実際には、追加したばかりの image_dir 項目がデフォルトで使用されます。この項目が設定されていない場合でも、デフォルトは「images」という名前になっていますのでご心配なく。ここで特に注意すべき点は、現在の構成ファイルでは tmp ディレクトリが必要であり、このディレクトリは img ディレクトリの下に配置され、この tmp ディレクトリには結合する必要がある画像が含まれています。
3行目は、計算されたbackground-positionであるすべてのスプライトのCSSを出力することを意味します。ここの中央の tmp は上記と同じである必要があります。変更方法についてはドキュメントを参照してください。

次に、コンパスコンパイルを呼び出してコンパイルすると、結合されたイメージ tmp-sxxxxxxxxxx.png が img ディレクトリに表示され、対応する tmp.css ファイルが css ディレクトリに生成されることがわかります。

画像の名前付けの最適化

画像を自動的に生成するのは素晴らしいと思いますか? しかし、画像名にハッシュ番号の長い文字列が含まれるのは非常に不快です。以下でこの数字を扱いましょう。

compass は、compass でコールバックと呼ばれるいくつかのフック関数を提供します。ここでは、on_sprite_saved というフックを使用します。 config.rb ファイルに次の段落を追加します。コンパス ウォッチを使用して変更を自動的に検出する場合は、コンパス ウォッチを中断して再実行する必要があることに注意してください。

on_sprite_saved do |filename|  if File.exists?(filename)    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')  endend

再実行すると、余分な tmp.png ファイルが存在し、ハッシュ付きの元のファイルがまだ存在しています。実際には、FileUtils.cp 関数が使用されているため、変更されている場合はコピーされます。 FileUtils.mv にコピーすると、ハッシュ値を含むファイルが存在します。
次に、tmp.css ファイルをもう一度見て、ハッシュを含むファイルがその中でまだ使用されていることを確認します。
ここで使用するもう 1 つのフック:

rree

OK、完了です。

完全な config.rb:

on_stylesheet_saved do |filename|  if File.exists?(filename)    css = File.read filename    File.open(filename, 'w+') do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')    end  endend

compass には多くの設定オプションもあります。公式 Web サイトのポータルまたはこの記事を参照してください。

リファレンス

http://riny.net/2014/compass-sprite/
http://segmentfault.com/q/1010000000308179
http://compass-style.org/help/documentation/configuration-reference/