Compass の書き方について

gistfile1.md

Compass の書き方について

では実際にどのように使うのか。 公式サイトの Reference を見てみると

This file can be imported using: @import "compass"

と書いてある。

なので、sass/screen.scss に

@import "compass";

という記述を行う。コンパイルされて書きだされた stylesheets/screen.css を見てもなにも変化はない。

sass/screen.scss に @import "compass"; と書くのは準備みたいなもので、こう書くことで、Compass のパターン（と言うのかはわからない）を使うことができる。

例えば、sass/screen.scss に

@import "compass";

.ex{
  @include clearfix;
}

と書くことで、stylesheets/screen.css を見てみると、

.example {
  overflow: hidden;
  *zoom: 1;
}

というふうに書き出される。

いちいち自分で mixin 用意しなくていいので便利。 ただし、Reference の下の方には

Non Imported Modules

You can import these yourself if you want to use them.
Layout – Page layout module.
Reset – Adds a CSS Reset into your stylesheet.

と書いてあるので、Layout と Reset に関してはそれように @import を書かなくちゃいけないっぽい。だからデフォルトの sass/screen.scss には

@import "compass/reset";

って書いてあるのかもしれない。