Mac環境
ターミナルを起動して「compass create プロジェクトフォルダパス」と入力してプロジェクトフォルダを作成します。
今回は「/Users/suzuki-kenji」の下に「compass_project」というプロジェクトプロジェクトフォルダを作成します。Congratulations!と表示されれば成功です。
次に、プロジェクトフォルダにScssファイルを配置した時に自動コンパイルされるように設定します。同様にターミナルからプロジェクトフォルダに移動して「compass watch」と入力します。
そうすると、プロジェクトフォルダにScssファイルを配置すれば、CSSファイルに自動コンパイルされます。この操作は、コマンドプロンプト上でCtrl+Cを押すまで有効です。
では、実際にSassファイルからCSSファイルを作成してみましょう。
先ほど作成したcompass_projectフォルダを見てみると、このような感じになっています。
| 作成されたフォルダとファイル | 内容 |
|---|---|
| config.rb | compassの設定ファイルです。詳しくは次回説明します |
| sassフォルダ | sassファイルを配置するフォルダです |
| ie.scss | Sassのサンプルファイルです |
| print.scss | Sassのサンプルファイルです |
| screen.scss | Sassのサンプルファイルです |
| stylesheetsフォルダ |
出力フォルダです。 SassファイルがコンパイルされてCSSファイルが配置されます |
| ie.css | コンパイルされたCSSファイルです |
| print.css | コンパイルされたCSSファイルです |
| screen.css | コンパイルされたCSSファイルです |
ためしにsassフォルダにtest.scssファイルを配置してみます。
test.scss
//sample
ul{
margin:5px;
li{
float:left;
}
}
すると、stylesheetsフォルダにtest.cssファイルがコンパイルされます。
test.css
/* line 2, ../sass/test.scss */
ul {
margin: 5px;
}
/* line 4, ../sass/test.scss */
ul li {
float: left;
}
まとめ
今回はCompassの導入部分を紹介しました。次回はCompassの実践についてご紹介します。
