Compassを使ってみる

  • 18
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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