CompassでSprite画像の書き出しをちょこっとカスタマイズ

Compassの大きな魅力のひとつ、Sprite画像の書き出し。
凄く素敵な機能ですが、
画像名からclass名が自動生成されちゃうのとかちょっとイヤなので、
もう少し私好みに出力してもらうためのカスタマイズ。

sprite/ 以下に対象のpng画像を入れておきます。
ここではimg_a.png、img_b.png、img_a_hover.png、img_b_hover.png、の4ファイルが入っている想定です。

$sprites: sprite-map("sprite/*.png");
$sprites-img:sprite-url($sprites);
@mixin sprite-background($name) {
 	height: image-height(sprite-file($sprites, $name));
 	width: image-width(sprite-file($sprites, $name));
 	background-position: sprite-position($sprites, $name);
}
@mixin sprite-background-pos($name) {
 	background-position: sprite-position($sprites, $name);
}

とmixinを書いて、
お目当てのところに

a {
    display: block;
    background-image: $sprites-img;
    &.class_a {
        @include sprite-background(img_a);
        &:hover {
            @include sprite-background-pos(img_a_hover);
        }
    }
    &.class_b {
        @include sprite-background(img_b);
        &:hover {
            @include sprite-background-pos(img_b_hover);
        }
    }
}

という感じに指定。
高さや幅も一定だったら、それもmixinに入れずに書くのが良いかも。

参照:

CSS Sprite Helpers for Compass | Compass Documentation
Compassでスプライト画象を高速に書き出す方法[to-R]

MacにSass、Compass、CodeKitを導入する

codekit_logo

Sassは知っていたけれど、
いちいちコンパイルするほど大規模サイトやらないし、と思って使っていませんでしたが。
そんなついつい黒い画面を避けちゃうあなたに朗報、
CodeKitの存在を知って早速(っていうか今頃)導入してみました。

導入の流れをおさらいします。

0. そもそも何それ?

SassはCSSの入力を構造的にし、変数などを使ってより書きやすくしてくれるツールです。
Rubyで出来ていますが、Rubyを知らなくても使えます。
CompassはSassを拡張し、より便利にしてくれるツールです。

というわけでWebのフロントをやる人にはとてもステキなツールなのですが、
いかんせんコマンドラインベースなので

Sassのファイルを書く→保存する→コンパイルする→ブラウザで見る

という流れが

CSSを修正→Codaで即確認

という流れよりもどうしても助長に感じてしまう
小規模サイト開発者(私)のような人にはあんまり踏み込む意義を見いだせずにおりました。
書いたらすぐ確認したくなっちゃう人なんです、私。

が、CodeKitのお陰で、
コンパイルする、という作業が必要なくなったのです、わーいわーい!
その他、CodeKitの凄さについてはこちらの記事が秀逸です。

Web制作者の覚醒剤CodeKitでマンモスうれぴー(はぁと | WP-D

Sassだけじゃなくて、これはもう次世代のWEBフロントエンド開発に不可欠になりそうな感じ。
というわけで、

1. インストール

macにはrubyが入っているので、ターミナルなどで

sudo gem install sass

sudo gem install compass

をしてそれぞれをインストール。

CodeKitは公式サイトから入手してタブルクリックする(そしてApplicationフォルダに移す)。

簡単ですねー。

2. 動かしてみる

CodeKitをたちあげて、監視してもらいたいプロジェクトフォルダをドラック&ドロップ。
Sassを使うだけなら、これだけでOK。

Compassを使うには、使いたいプロジェクトのポップアップメニューからCompassを選んで
Use Compass for this projectを選択。

コマンドラインから何もしてなければ、No Configuration File っていうポップアップ画面が出るので、
Install Compass をクリック。すると、
Install Compass In Project という設定画面が出るので、
それぞれのフォルダ名や書き出し方法を設定して、Add Compass To Projectをクリックする。

(Compassの使い方がまだ良くわかっていなくて、ieやらprintやらscreenやらとCSSを分けて出力されちゃうのを何とかしたいところ)

そうすると、フォルダ直下にconfig.rbという設定ファイルが出来るのでそれを直接編集することもできます。

3. CSSを書きだしてみよう

Coda2はLessもSassも対応しているのですぐ書けます。
デフォルトではsassというフォルダにSass(拡張子は.scss)ファイルが入っているので、
それを開いて編集(書き方は以下参照)し、保存するとすぐにCSSファイルが生成されます。

Growlを入れていたら、コンパイルに成功したよ(もしくは失敗したよ)とお知らせまで出ます。

エラーログを吐いてくれるのが何ともステキです。惚れます。

Compassについては、

An introduction to Compass from Lorin Tackett on Vimeo.

これを参照に書き始めてみましょう。

日本語ですとココがわかり易かったです。

CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp

その前にSassの書き方っていう人はこちらなどを。

【Sassを覚えよう!Vol.4】Sassの基本的な記述方法 – CSS HappyLife

というわけで、私のCSSライフがかんなり快適になりました。
Macさいこー。って気分になりますね。