Windows7上へのSass（SCSS）・Compass環境の構築

## Sassとは
* CSSの記述を楽にするためにCSSの記法にいくつかの機能を足したもの
 * 変数・計算式
 * セレクタのネスト
 * mixinと呼ばれる関数
 * extendと呼ばれるセレクタの継承
* YAMLのような字下げで書いていく
 * HAMLと言うらしい

## SCSSとは
* Sassのバージョンアップ時に追加された記法
 * ネストなどがわかりやすくなった
 * プログラマーに非常に優しい

## Compassとは
* Sass（SCSS）の関数（mixin）を集めたもの
 * CSS3のベンダープレフィックス付きのスタイルが簡単に書けるようになる
 * CSSのResetも簡単に行える

## Sass（SCSS）のメリット・デメリット
* メリット
 * プログラマブルに書いていける
 * 変数などを利用し、一括で値を変更することが可能である
 * 関数（mixin）を利用して面倒な書き方を簡略化することが可能である
 * セレクタの継承を利用し、見やすく、かつ、コード量が少ない書き方が可能である
 * 複数ファイルに分けておき、開発時には見やすくコンパイル時には1ファイルに、ということが可能である
* デメリット
 * Sass（SCSS）のコンパイル環境が必要である
 * Sass（SCSS）に対応したエディタ（統合開発環境）を用意した方がいい

## 要するに
Sass（SCSS）はプログラマーにとって習得レベルは低く、書きやすいものなので、使っていこう！
ただ、CSSそのものではないので、対応する統合開発環境は欲しいし、そもそもコンパイルする環境が必要…

## Sass（SCSS）コンパイル環境の構築
### Windowsの設定
* Dドライブがあるものと想定し、Dドライブ直下に「server」ディレクトリを作成する
* [7-Zip](http://sevenzip.sourceforge.jp/) をインストールしておく

### Rubyのインストール
1. [RubyInstaller for Windows]("http://rubyinstaller.org/downloads/") から最新版のRubyをダウンロード。
 * あまり環境は汚したくないので、「7-ZIP ARCHIVES」をダウンロードする
 * 現在（2014/07/07）の最新版は「Ruby 2.0.0-p481 (x64)」である
 * 「D:\server」ディレクトリにダウンロードファイルを置く
![1.png](https://qiita-image-store.s3.amazonaws.com/0/11167/8ed526d9-9da5-4fae-9188-af3d2d6ccfce.png)
2. ダウンロードした「7z」ファイルを解凍する。
 * 7-Zipをインストールしていると「ここに展開」というメニューができるので、それを選択して解凍する。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/11167/7d92f1c5-d969-e393-9117-6a9cb0d5d9a8.png)
3. 解凍したディレクトリ名を「ruby」へと変更する
 * 上手くいっていれば、「ruby」ディレクトリ内に「bin」「include」「lib」「share」ディレクトリがあるのが確認できる
![3.png](https://qiita-image-store.s3.amazonaws.com/0/11167/17f64155-12ed-aa4d-5d96-7186edb05a84.png)
![4.png](https://qiita-image-store.s3.amazonaws.com/0/11167/1a669c28-9b5a-07d2-49a4-2cafd62b2442.png)
4. Rubyへのパス（ここでは「D:\server\ruby\bin」）を環境変数に設定する。
 * 「コンピューター」→「システムのプロパティ」→「システムの詳細設定」→「環境変数」→「システムの環境変数」
 * 「Path」に「D:\server\ruby\bin」を追記する。
 * Windowsのパスセパレートは「;」であることに注意する
![5.png](https://qiita-image-store.s3.amazonaws.com/0/11167/50735455-0afc-ded1-88c1-79d7166c16db.png)
5. Pathを確実に反映させるため、再起動する
6. Rubyがインストールされていること、Pathが反映されていることを確認する
 * コマンドプロンプトを立ち上げて「ruby -v」と打ち、バージョンが表示されることを確認する
![6.png](https://qiita-image-store.s3.amazonaws.com/0/11167/621339ec-f141-f430-d232-5bcf533136ed.png)

### Gemアップデート
* コマンドプロンプトを立ち上げ、「Gem」をアップデートする

参照：[Gemのアップデート](http://qiita.com/t4kmru/items/ac0a61e099f0345186b7)
> ```rb
> gem i rubygems-update
> update_rubygems
> gem pristine --all
> ```

### Sass（SCSS）インストール
* コマンドプロンプトを立ち上げ、「Sass」をインストールする

> ```rb
> gem install sass
> ```

### Compass インストール
* コマンドプロンプトを立ち上げ、「Compass」をインストールする

> ```rb
> gem install compass
> ```

### インストール確認
* Sass確認

```shell-session
sass -v
```
> ```shell-session
> Sass 3.3.8 (Maptastic Maple)
> ```
![7.png](https://qiita-image-store.s3.amazonaws.com/0/11167/7be54f65-421f-4380-97cd-ea48af3cf2ba.png)

* SCSS確認

```shell-session
scss -v
```
> ```shell-session
> Sass 3.3.8 (Maptastic Maple)
> ```
![8.png](https://qiita-image-store.s3.amazonaws.com/0/11167/f4a270b7-670b-bc4a-8ce4-508854fbd79f.png)

* Compass確認

```shell-session
compass -v
```
> ```shell-session
> Compass 0.12.6 (Alnilam)
> Copyright (c) 2008-2014 Chris Eppstein
> Released under the MIT License.
> Compass is charityware.
> Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
> ```
![9.png](https://qiita-image-store.s3.amazonaws.com/0/11167/8ec82d5a-a624-b1cd-2f66-c0461c1d04c6.png)