Mac OS 10.8(Mountain Lion)にSASS + Compassをインストールするまでの個人的なメモ。

SASSはCSS風に書けてCSSファイルにコンパイルしてくれる言語で、
CompassはSASSで使えるライブラリ群ね。

詳しくは公式サイトを参照。

 

Compassの何が便利って、
CSS Spriteを作るのに、
画像を結合しなくてもいいし、
画像のpositionを指定しなくて良いのが便利過ぎる。

自分で画像を結合して、
選択ツールで座標を調べてたのは、
すげー無駄だったなぁって思う。

 

Rubyのインストール状態の確認

まずはRubyが入っていることを確認。
Mountain LionにはRubyが始めから入っているっぽいので、確認する必要がないかもしれない。

rubyは1.8系でも大丈夫(だと思う)。

 

RubyGemsのインストール

まず、RubyGemsのインストール状態を確認。

インストールされていない場合は、
公式サイトからダウンロードしてsetup.rbを実行。

Download RubyGems | RubyGems.org | your community gem host

ダウンロードもターミナルでやる場合は下記のような感じでしょうか。

すでにインストールされている場合は、
rubygemsをアップデートする。
(update_rubygemsとgem update –systemはどっちがいいんですかねぇ?)

インストール or アップデートができたら、
念のためバージョンを確認。

 

Compassのインストール

gemからCompassをインストールする。

念のためインストールできたか確認。

ちなみに、sassはcompassを入れると勝手に入る。

 

Compassの初期設定と監視

ディレクトリ構成はまだまだ検討中だけど、
今のところ下記のような感じにしている。

  • project_directory/
    • css/ → cssファイルを出力する
    • js/ → jsファイル置き場
    • img/ → 画像ファイル置き場
    • sass/ → sassファイル置き場

で、上記ディレクトリ構成になるように、
compassの設定ファイルを生成する。

 

scssファイルを監視する

下記のコマンドでsassファイルを監視して、
更新があるとcssファイルを書き出してくれる。

出力するcssファイルは、
minify化しない理由がないので、
config.rbに下記行を追加して、
始めからminify化するようにしている。

 

以上。
個人的なメモでした。

関連コンテンツ

スポンサーリンク