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

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 をインストールしておく

Rubyのインストール

RubyInstaller for Windows から最新版のRubyをダウンロード。
- あまり環境は汚したくないので、「7-ZIP ARCHIVES」をダウンロードする
- 現在（2014/07/07）の最新版は「Ruby 2.0.0-p481 (x64)」である
- 「D:\server」ディレクトリにダウンロードファイルを置く
ダウンロードした「7z」ファイルを解凍する。
- 7-Zipをインストールしていると「ここに展開」というメニューができるので、それを選択して解凍する。
解凍したディレクトリ名を「ruby」へと変更する
- 上手くいっていれば、「ruby」ディレクトリ内に「bin」「include」「lib」「share」ディレクトリがあるのが確認できる
Rubyへのパス（ここでは「D:\server\ruby\bin」）を環境変数に設定する。
- 「コンピューター」→「システムのプロパティ」→「システムの詳細設定」→「環境変数」→「システムの環境変数」
- 「Path」に「D:\server\ruby\bin」を追記する。
- Windowsのパスセパレートは「;」であることに注意する
Pathを確実に反映させるため、再起動する
Rubyがインストールされていること、Pathが反映されていることを確認する
- コマンドプロンプトを立ち上げて「ruby -v」と打ち、バージョンが表示されることを確認する

Gemアップデート

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

参照：Gemのアップデート

gem i rubygems-update
update_rubygems
gem pristine --all

Sass（SCSS）インストール

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

gem install sass

Compass インストール

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

gem install compass

インストール確認

Sass確認

sass -v

Sass 3.3.8 (Maptastic Maple)

SCSS確認

scss -v

Sass 3.3.8 (Maptastic Maple)

Compass確認

compass -v

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