CSSフレームワーク「Compass」の基礎

SassとCompassをつかってCSSを効率作成しよう（3）

サンプルファイルの作成と実行

　まずはセットアップ作業です。Compassでは、セットアップ作業をして作成したプロジェクトフォルダにSassファイルを配置するだけで、CSSファイルにコンパイルしてくれます。そこで、Compassを実行するためのセットアップを行います。

Windows環境

　コマンドプロンプトを起動して「compass create プロジェクトフォルダパス名」と入力してプロジェクトフォルダを作成します。

　今回は「C:\suzuki」の下に「compass_project」というプロジェクトフォルダを作成します。

　次に、プロジェクトフォルダにScssファイルを配置した時に自動コンパイルされるように設定します。コマンドプロンプトからプロジェクトフォルダに移動して「compass watch」と入力します。

　そうすると、プロジェクトフォルダにScssファイルを配置すれば、CSSファイルに自動コンパイルされます。この操作は、コマンドプロンプト上でCtrl+Cを押すまで有効です。

　では、実際にSassファイルからCSSファイルを作成してみましょう。

　先ほど作成したcompass_projectフォルダを見てみると、このような感じになっています。

C:\suzuki\compass_project

　各フォルダの中身はこのような感じです。

C:\SUZUKI\COMPASS_PROJECT
│  config.rb
│
├─.sass-cache
│  ├─2d0787f9f54d16cd86875e4eda2af3eb1c66619b
│  │      _utilities.scssc
│  │
│  ├─8f3b9183054cab00536d0c8a46b5a64a863d19d1
│  │      _reset.scssc
│  │
│  └─a6dca7105b9168a0778f831b993e60d0c9783ddb
│          ie.scssc
│          print.scssc
│          screen.scssc
│
├─sass
│      ie.scss
│      print.scss
│      screen.scss
│
└─stylesheets
        ie.css
        print.css
        screen.css

作成されたフォルダとファイル	内容
.sass-cacheフォルダと その中身のファイル	キャッシュを保持しているフォルダ 次回コンパイル時に実行速度を上げるためのファイルが配置されています
sassフォルダ	sassファイルを配置するフォルダです
ie.scss	Sassのサンプルファイルです
print.scss	Sassのサンプルファイルです
screen.scss;	Sassのサンプルファイルです
stylesheetsフォルダ	CSS出力フォルダです。 SassファイルがコンパイルされてCSSファイルが配置されます
ie.css	コンパイルされたCSSファイルです
print.css	コンパイルされたCSSファイルです
screen.css	コンパイルされたCSSファイルです
config.rb	compassの設定ファイルです。詳しくは次回説明します

　ためしに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;
}

C:\SUZUKI\COMPASS_PROJECT
│
├─sass
│      ie.scss
│      print.scss
│      screen.scss
│      test.scss ← 配置したファイル
│
└─stylesheets
        ie.css
        print.css
        screen.css
        test.css ← コンパイルされたファイル