一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

CompassでCSS Sprite生成(導入、スプライト自動生成)

今回は、以前使用したSassフレームワークであるCompassの導入と、それを利用して生成や編集がすこぶるダルいCSS Spriteの自動生成をするという事に挑戦したいと思います。


まずはcompassのインストール。
ちなみに環境はMacです。また、RubyやSassはすでにインストール済という体で話を進めさせていただきます。

sudo gem install compass


これだけでCompassの入手完了です。楽!!


続いて、新規のプロジェクト(ディレクトリ)を生成します。
sublime textで新規プロジェクトつくってからcmd + bでコンパイルとかもできますが、今回は普通にターミナルでやりましたー)


このコマンドたたけばOK↓

compass create demo


これでdemoという名前のディレクトリが生成されました。


ちなみに中身は


ーーconfig.rb
ーーsass
ーーstylesheets


ってなってます。


sassは.scssファイル用、stylesheetsはコンパイルで生成された.cssファイル用のディレクトリになってます。


そして.scssファイルの保存場所や.cssファイルの生成場所などの取り決めを書いておく所がconfig.rbになります。


config.rbには

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"


と書かれており、ここを編集すればコンパイル先のディレクトリを変更できたり、その他の細かい設定もできるみたいですね。


たとえばSassを使ってコーディングをするとき、生成されるCSSの整形をするために

 sass --style expanded

 といったことを書いていたのですが、

Compassの場合だとこのconfig.rbに

output_style= :expanded


と追記してやれば同じような事になるみたいです。


あ、でもCompassはそれ追記しなくてもデフォルトで:expandedになってるぽいですねww
他の、:compressedとか:compactとかできるので必要なときにそれらを切り換えてみればよいですねー


では次にCSS Spriteの生成に入りたいと思います。


まずimagesフォルダをdemoフォルダ直下に作成して、その中にsprite_imgフォルダを追加、そしてその中に「ス」、「プ」、「ラ」、「イ」、「ト」という5つの画像を追加しました。(画像名はsprite_img1~5.pngとします)
                     ↓

つづいてsample.scssを用意して、スプライト自動生成のコードを書いてみました。

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


compassを呼んだ状態で、sprite_img内のすべてのpngファイルに対してspriteを生成しなさい!
みたいな命令ですかね。


じゃあ実際にCSSを生成してみようということで、以下のコマンドをたたきます。
これでcompassを自動監視状態にして、.scssを作成、編集したら自動的に.cssが作成、上書きされるようになります。

cd demoのあるところ
compass watch


それで生成されたcssはこれ。

/* line 74, sprite_img/*.png */
.sprite_img-sprite, .sprite_img-sprite_img1, .sprite_img-sprite_img2, .sprite_img-sprite_img3, .sprite_img-sprite_img4, .sprite_img-sprite_img5 {
  background: url('/images/sprite_img-sd69ac529e7.png') no-repeat;
}

/* line 60, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.sprite_img-sprite_img1 {
  background-position: 0 0;
}

/* line 60, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.sprite_img-sprite_img2 {
  background-position: 0 -100px;
}

/* line 60, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.sprite_img-sprite_img3 {
  background-position: 0 -50px;
}

/* line 60, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.sprite_img-sprite_img4 {
  background-position: 0 -150px;
}

/* line 60, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.sprite_img-sprite_img5 {
  background-position: 0 -200px;
}


画像も自動で生成されて、こんな感じになってました。
(透過pngなので、見えにくくてごめんなさい…)


f:id:d_animal141:20130310002451p:plain


ラとプが逆になったのが気になりますが、、


ただそんなことよりもっと大きな問題がいくつかありそうな予感です。

                
問題1)スプライトを呼んでいるbackgorundのurlがこのままだと、ルート/imagesとなっている。


この部分はcssファイルから見た相対パスで、../imagesと読まれてほしいです!

そこでconfig.rbでうまいこと設定できないか調べてみると、

relative_assets = true


を追記すると、Com­passで拡張された関数で使うURLを相対パスで指定する事ができるようになるみたいです。
デフォルトでは絶対パスになっているみたいですね。

これでやり直してみると、ちゃんとbackgroundのurlが相対パスで読まれるようになりました。
(なんかcompassを一回終了してからもう一度起動しないとうまく変更されませんでした。そういうもんなんですかね)


問題2)出力されたcssに書かれたコメントがうざい。

これも同様にconfig.rbの設定から解決できました。

line_comments = false


を追記してコンパイルし直したら、ちゃんとうざいコメントが消えてきれいなCSSファイルが出力されました!!


問題3)widthとheightの記述がない…

実際に適用してみてもきちんとwidthとheightが指定されていないと崩れてしまう事があると思うので、できれば生成した時点でそれらのスタイルも入れたいです。


これはこちらの記事を参考にさせていただき解決できました!!ありがとうございます。

http://liginc.co.jp/designer/archives/11623


scssでスプライトの対象画像をimportする前に以下を追記すれば良いみたいです。

$sprite_img-sprite-dimensions:true;


これでちゃんとwidth,height付きでcssが生成されました。

                      ↓
以上の問題を解決した結果、できたcssを一応のせておきます。

.sprite_img-sprite, .sprite_img-sprite_img1, .sprite_img-sprite_img2, .sprite_img-sprite_img3, .sprite_img-sprite_img4, .sprite_img-sprite_img5 {
  background: url('../images/sprite_img-sd69ac529e7.png') no-repeat;
}

.sprite_img-sprite_img1 {
  background-position: 0 0;
  height: 50px;
  width: 50px;
}

.sprite_img-sprite_img2 {
  background-position: 0 -100px;
  height: 50px;
  width: 50px;
}

.sprite_img-sprite_img3 {
  background-position: 0 -50px;
  height: 50px;
  width: 50px;
}

.sprite_img-sprite_img4 {
  background-position: 0 -150px;
  height: 50px;
  width: 50px;
}

.sprite_img-sprite_img5 {
  background-position: 0 -200px;
  height: 50px;
  width: 50px;
}


んで、実際にsample.htmlというファイルをつくってそれにスプライトを適用してみました。

//sample.html

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>Sprite_sample</title>
	<link rel="stylesheet" href="./stylesheets/sample.css">
	
</head>

<body>
	<ul>
		<li class="sprite_img-sprite_img1"></li>
		<li class="sprite_img-sprite_img2"></li>
		<li class="sprite_img-sprite_img3"></li>
		<li class="sprite_img-sprite_img4"></li>
		<li class="sprite_img-sprite_img5"></li>
	</ul>
</body>
</html>


これをブラウザで確認してみるとちゃんと


・ス
・プ
・ラ
・イ
・ト


って表示されてました!


今回はCompassの導入とCSS Spriteの自動生成にチャレンジに挑戦しました!

ただ確かにこれでもめっちゃ便利なんですが、例えばRetinaに対応したSpriteを作りたい!など細かい部分への配慮はこれだけだと不十分です。。


ということで次は手動でより細かくスタイルを指定しながらCompassCSS Spriteを作ることに挑戦したいと思います!


がんばろー

小さな事からコツコツと。