[Sass & Compass] Compass: プロジェクトのはじめかた
ミニマムにプロジェクトをはじめる手順をまとめます。
[markdown]
## 初期化してプロジェクトをはじめる
プロジェクトディレクトリから開始します。
compass create にオプションを付けて実行する例が多いですが、個人的には下記の流れがおすすめ。
1. compass create –bare
1. config.rb を編集する
1. compass init
実は config.rb さえあれば、最後の `compass init` だけですぐに始められます。
### compass create –bare
設定ファイルを生成します。
“`
% compass create my_project –bare
directory my_project/
directory my_project/sass/
create my_project/config.rb
*********************************************************************
Congratulations! Your compass project has been created.
:
:
“`
### config.rb を編集する
プロジェクトに応じた内容を設定ファイルに記述していきます。
“`
% cd my_project
% subl config.rb
“`
それぞれの設定項目については、下記が分かりやすかったです。
> * [Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG](http://liginc.co.jp/web/html-css/css/53075)
この設定ファイルには、いろいろと確認すべき点があるので、別途まとめることにします。
### compass init
設定に応じたファイルやディレクトリが生成されます。
“`
% compass init
directory stylesheets/
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
create stylesheets/ie.css
create stylesheets/print.css
create stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
:
:
:
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
“`
あわせて html ファイルに加えるべき、`haed` タグの内容が出力されました。
#### CSS Framework を使う場合
公式の例は以下ですが、
> * [Blueprint Framework | Compass Documentation](http://compass-style.org/help/tutorials/blueprint/)
“`
$ compass create my_project –using blueprint/basic
“`
init にオプションを付ければ良いようです。
“`
% compass init –using blueprint
“`
既存プロジェクトに後から追加する場合は、以下の通り。
“`
% compass install blueprint
“`
> * [Compass Help | Compass Documentation](http://compass-style.org/help/)
### .gitignore
git を使っている場合は、.gitignore に下記を追加します。
“`
.sass-cache/
“`
## ファイル作成
とりあえずファイルを作成してみます。
init 時に表示された head 情報を入力します。
“`
% subl index.html
“`
@import で compass をインポートします。
“`
% subl sass/style.scss
“`
“`
@import “compass”;
@import “compass/reset/”;
“`
### @import “compass” で import される module
* CSS3 – Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
* Typography – Provides basic mixins for common typography patterns.
* Utilities – Provides basic mixins for common styling patterns.
### 別途、import する必要がある module
* Layout – Page layout module.
* Reset – Adds a CSS Reset into your stylesheet.
> * [Compass Core Framework | Compass Documentation](http://compass-style.org/reference/compass/)
## compass w
sass ディレクトリ以下のファイルを監視し、変更があれば自動コンパイルされます。
“`
% compass w
>>> Change detected at 17:52:04 to: style.scss
create stylesheets/style.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.
“`
`Ctl + C` で終了します。
> * [CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp](http://howtohp.com/css/compass.html)
[/markdown]