MacでSCSSを使うには、以下の手順で準備します。
- Sass+Compassのインストール
- フォルダ/ファイルの準備
- 自動コンパイルの起動
手順
1. Sass+Compassのインストール
Sassのインストール
まず、Sassをインストールします。
gem install 〜でインストールして、〜 -vでインストールされたかどうか確認します。
$ gem install sass
$ sass -v
install時に管理権限が必要な場合は、以下のようにsudoコマンドを用います。
$ sudo gem install sass
Compassのインストール
上記と同じ要領でCompassもインストールします。
$ gem install compass
$ compass -v
2. フォルダ/ファイルの準備
フォルダ構成の準備
あとは、SCSSを使うために各種ファイルを準備するだけです。
以下のような構造を準備します。
css /
scss /
main.css.scss
config.rb
例えば、scssディレクトリにmain.css.scssという名前でSCSSファイルを作ると、cssフォルダにmain.cssというCSSファイルが自動で生成されるようになります。
config.rbの設定
config.rbには、以下のように記述してください。
http_path = "/"
css_dir = "css"
sass_dir = "scss"
3. 自動コンパイルの起動
上記だけでは、まだなにも起こりません。
SCSSファイルをCSSファイルに自動でコンパイルするには、config.rbがあるディレクトリで以下のコマンドを実行してください。
$ compass w
ちなみに、SCSSフォルダの中が空っぽだと、以下のように出力されます。
この場合は、SCSSファイルを作成してもう一度実行してみてください。
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を使う準備が完了しました。
例えば、main.css.scssに以下のように書いてみてください。
a {
&:hover {
text-decoration: none;
}
}
これを保存すると、以下の内容を持ったmain.cssが自動で作成されます。
/* line 2, ../scss/main.css.scss */
a:hover {
text-decoration: none;
}
追伸：
フォルダ/ファイルは、以下のコマンドで自動で生成してくれます。
……が、上記では必要最小限の構成で説明するために手動で作成しました。
必要に応じて使い分ければよいと思います。
$ compass create
追伸2：
やっぱりrails便利(*´∀｀)