Compassとは
Sass(Syntactically Awesome Stylesheets)を元に開発したフレームワーク。
Sassで記述されたファイルをコンパイルしてCSSファイルを生成出来る！
Compassのインストール
rubyをインストールした状態で、下記を実行
$ sudo gem update -system
$ sudo gem install compass
設定
プロジェクトの中身をみてみると、config.rbというファイルがある。
デフォルトは
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
- http_path：サイトのパス
- css_dir：CSS ファイルが書き出される場所
- sass_dir：SCSS ファイルの場所
- images_dir：画像ディレクトリ ※画像サイズを取得する時、この指定したディレクトリ以下を見るようです
- javascript_dir：JavaScript ファイルの場所
- output_style：SASS の書き出し方設定。:expanded, :nested, :compact or :compressed 「:expanded」{} で改行する形。よくみる CSS の記述形式はこれです。可読性たかし。 「:nested」Sass ファイルのネストがそのまま引き継がれる形。 「:compact」セレクタと属性を 1 行にまとめて出力。可読性低め。 「:compressed」圧縮して出力（全ての改行・コメントをトルツメ）。可読性は投げ捨て。
- line_comments：CSS に SCSS での行番号を出力するかどうか。true or false
モジュールのインポート
Compassを使うには、まずメインモジュールをインポートしなければならない。
@import "compass";
これで以下のモジュールをインポートしていることになる。
- CSS3
- Typography
- Utilities
実行
新規プロジェクトを作成し、compassの初期化を行う
compass create プロジェクト名
sassファイルを監視して、セーブされたらcssにコンパイルする
compass watch [プロジェクトのパス]
下記のようなエラーが出たらファイルパスをチェック！
config.rbなどを見なおして設定し直す
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.
きちんと実行されると下記が表示されて、ちゃんとscssファイルがコンパイルされています。
>>> Change detected at 20:07:25 to: test.scss
identical stylesheets/ie.css
identical stylesheets/print.css
identical stylesheets/screen.css
overwrite stylesheets/test.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
余談
config.rbがおいてある場所に、拡張子.commandを付けてファイルを保存
#!/bin/bash
htdocs=$(dirname $0)
cd $htdocs
compass watch
今回はstart.commandという名前で保存。
これを開くかCmd + Oで実行するだけでプロジェクトを監視してくれるようになります。
これを手で打っていたことを考えると、相当便利ですね。。
scss sass/test.scss stylesheets/test.css