CodeKitで簡単にCSS Preprocessorを利用する!

このエントリーをはてなブックマークに追加

本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。

CSS Preprocessor Advent Calendar 2012とは年末の12/1〜12/25まで、みんながブログなどでCSS Preprocessorについて熱く語るというイベント、僕は2012年一番重宝したMacアプリ「CodeKit」について解説します。

そもそもCSS Preprocessorってなに?

CSS PreprocessorはSassやLess、StylusといったいわゆるCSSメタ言語のこと。CSSメタ言語とはCSSと異なる文法でCSSを記述できる言語です。

たとえば、通常のCSSでは

#bar{
	width:100%;
}
#bar .foo{
	color:red;
}
#bar .foo p{
	text-indent:100px;
}

と記述しますが、Sassでは次のように記述できます。

#bar{
	width:100%;
	.foo{
		color:red;
		p{
			text-indent:100px;
		}
	}	
}

入れ子構造が明確になりわかりやすいし、何度も「#bar」を書かなくては行けない手間からも解放されます。他にもCSSメタ言語ではCSSを簡潔に記述できる様々な文法が用意されています。

ですが、当然このままではSassで書かれた内容をブラウザは解釈できません。

そこでCSSメタ言語ではブラウザで表示する前に一度「コンパイル」を行い、ブラウザが理解できる、つまり通常のCSSに変換する必要があります。

コンパイルには様々な方法がありますが、ここでCodeKit登場です。CodeKitはCSSメタ言語で書かれた記述を簡単にコンパイルできるツールです。

CodeKitの使い方

CodeKitはMacのアプリですので公式サイトからダウンロードしてインストールして下さい。有料のアプリケーションですが数日間の試用期間がありますので、その間に使い込んでみて必要かどうかを判断しましょう。アプリのお値段は$25です。

CodeKitを起動すると次のような画面が表示されます。

CodeKit起動画面

サイドバーに、作成しているWebサイトのフォルダをドラッグするだけで利用可能です。

CodeKitのプロジェクト画面

これは空のhtdocsというフォルダをCodeKit上にドラッグした状態です。左のPROJEGTSにhtdocsが追加されましたね。フォルダの名前をクリックすると任意のプロジェクト名に変更できるので、わかりやすい名前を付けておきましょう。

プロジェクト名の変更

つぎにhtdocsフォルダ内に作業フォルダを作成します。「sass」というディレクトリを作成して、style.scssというファイルを作成しましょう。Sassにはsass記法とscss記法という2つの記法がありよく利用されるのはscss記法です。その為、拡張子が「scss」なので注意して下さい。

作成したフォルダやファイルは一度、画面右下のリロードボタンでリロードを行うと認識されるようになります。

CodeKitでリロード

リロードするとプロジェクト内に先ほど作成した/sass/style.scssが追加されます。

CodeKitにstyle.scssが追加された

それでは、style.scssの中身を次の内容に変更してみましょう。

#bar{
	width:100%;
	.foo{
		color:red;
		p{
			text-indent:100px;
		}
	}	
}

保存した瞬間にcssディレクトリが作成され、その中にstyle.cssが作成されます。

作成されたCSS

style.cssの中身を確認してみると・・・・

#bar {
  width: 100%; }
  #bar .foo {
    color: red; }
    #bar .foo p {
      text-indent: 100px; }

とちゃんとコンパイルされてますね。このようにCodeKitにプロジェクトとして登録してけばSassなどの保存時に自動的にコンパイルしてくれます。簡単ですね。いちいちターミナルとか立ち上げなくても大丈夫です。

CodeKitはSass以外にもLess, Stylus, Jade, Haml, Slim, CoffeeScriptやCompass など様々な言語を自動でコンパイルしてくれます。

コンパイル以外にもファイル更新時にブラウザのオートリロードを行ったり、複数のJavaScriptファイルの結合やMinify圧縮、画像の最適化、JSHintやJSLintによるJavaScriptバリデーションが可能です。

また様々な設定がプロジェクト毎にJSONで出力できますので、新しくプロジェクトに参加する人はプロジェクトフォルダをドラッグするだけでカスタマイズした設定などを利用できるようになります。

やっておきたい初期設定

少しだけ変えておきたい初期設定があるのでそれも紹介します。プロジェクトの設定は左のプロジェクト名を右クリックして「Project settings」を選択、[Enable project-level settings]を選択します。これでcodekit-config.jsonという設定ファイルが生成され、次回からは「Project settings」→「Edit project settings」から設定を変更できます。

CodeKitのProject settings

Sassの出力形式を変更する

デフォルトではSassの出力形式は次のようになります。

#bar {
  width: 100%; }
  #bar .foo {
    color: red; }
    #bar .foo p {
      text-indent: 100px; }

なんだか気持ち悪いですね。これを変更しましょう。出力形式の変更は設定画面でLanguagesでSassを選択して、Output Styleで変更できます。出力を選んで画面下にある「Apply File Settings」を押すと変更されます。

Sassの出力形式を変更

たとえば「Expanded」を選択すると次のような出力です。

#bar {
  width: 100%;
}
#bar .foo {
  color: red;
}
#bar .foo p {
  text-indent: 100px;
}

普通のCSS形式ですね。あとで他の人が直接CSSを修正する可能性がある場合は出力を「Expanded」にしておきましょう。

また、出力をCompressed にすると次のようになります。

#bar{width:100%}#bar .foo{color:red}#bar .foo p{text-indent:100px}

改行や余白が取り除かれた形です。プロジェクト全員がSassなどのCSSプリプロセッサで記述する場合はこちらの出力のほうがよいでしょう。

JSHintをOFFにする

プロジェクト内にJavaScriptファイルがあると保存時にJSHintというJavaScriptバリデーションが実行されます。バリデーションが通らないとCodeKitが前面でてきてバリデーション内容を通知してくれます。

JSHintのアラート

本気でJSを書く際には良いかもしれませんがライトに書く場合には少しうざいのでOFFにしておいた方がよいでしょう。

設定画面のLanguagesでJavaScriptを選択して、「Check Syntax With」を「JSHint」から「Nothing」にしましょう。

CodeKitでJavaScriptの設定変更

JavaScriptのMinify圧縮時のファイル名を変更する

JavaScriptファイルは保存時に自動的にMinify圧縮してくれます。イケてますね。ただしそのファイル名がダサい。

「script.js」を保存すると「script-ck.js」というファイルが生成されます。ckはCodeKitの略みたいです。ダサいですね。

先ほどと同じく設定画面のLanguagesでJavaScriptを選択して、「Output File Suffix」を「-ck」から「.min」にすると「script.min.js」というナウいファイル名で保存されるようになります。

もうCodeKitなしではJavaScriptやCSSは書きたくないというくらい重宝しているアプリですので、ぜひ一度お試しください。

--

2013年1月12日にCSSメタ言語のセミナーCSS Nite LP, Disk 26「CSS Preprocessor Shootout」が開催されます。そろそろキャンセル待ちになるので興味がある方はお早めにご検討ください。

関連エントリー

Compassでスプライト画象を高速に書き出す方法
MacのCodeKitでCompassを使う
CompassでデータURI スキーム
CompassでCSSスプライト
Stylus入門

スポンサードリンク

«jQueryデザイン入門 がAmazon.co.jpの2012年間ランキング[コンピュータ]部門の29位に | メイン | iPhoneでlabel要素を動作させる方法»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/646
コメントを投稿