CompassでCSSスプライトを生成した際のファイル名を変更する方法
2013年02月06日

CompassでCSSスプライトを生成した場合、生成された画像ファイルの名前が妙な感じになってる事に気づいた方もいらっしゃることでしょう。あれは何なんでしょうね。
対キャッシュでユニークな名前にしたいのですか?まぁ、何であれがつくかはさておき、是非とも消したいですよね。僕は消したいです。何となく。
sprites-s8e8b8934fb.png
↑これ。この文字列いらんよね。
消し方
Compassを使っている場合、プロジェクトの設定ファイルが config.rb として作成されていると思うのですが、そこに追記して消すことが出来るみたいです。
on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png') end end on_stylesheet_saved do |filename| if File.exists?(filename) css = File.read filename File.open(filename, 'w+') do |f| f < < css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png') end end end
参考サイト
参考というか全部書かれてたからコッペしただけですけどね
css – How to turn off COMPASS SASS cache busting? – Stack Overflow
おもったこと
CSSスプライトはどんなツールを使おうと結構面倒である事には変わりないんじゃないかなぁと思ってる感じです。こっちで作ったスプライトに他の人が画像を追加する、何てこともないとは言えないわけで。
sassでもそうなんですが、コンパイルするって事がまだまだWebでは当たり前にはなっていないので、制作よりもむしろ制作後のフローとかの方が面倒なんじゃないかなぁと、そしてそれを解決する手段は、「みんなが使うビルドシステム」みたいな大がかりなソフトになっていくのかなぁ、と思う感じです。
はてさてWeb制作の未来派どこへ向かうのですかね−。
他にこんな事も書いてます
- Mac OS X zsh で cd したら同時に ls -GAF するエイリアスコマンド
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- Dashすげー便利
- jQueryのwidth,height系メソッドの違いについて
- Grunt+ST2な人がプロジェクトをチャチャっと開始する方法
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- PHPのvar_dumpをChromeのconsole.logとして出力する
FBでコメント
3個のコメント
書いてたー CompassでCSSスプライトを生成した際のファイル名を変更する方法 (via @Pocket) CompassでCSSスプライトを生成した際のファイル名を変更する方法:STACKSTOCK http://t.co/JWpBDcpA
SS | CompassでCSSスプライトを生成した際のファイル名を変更する方法 http://t.co/dX5dxJqK
CompassでCSSスプライトを生成した際のファイル名を変更する方法 http://t.co/XszNpoDR
トラックバック/ピンバックはありません。