何かと今Hotな（そんなことを思っているのはわたしだけかもしれませんが）、Sassを使ってみました。
Sassは、CSSの拡張版のようなもので、プログラムのように演算や変数を使用したり、入れ子記述ができたりなんだりします。とにかくスマートなもの！なのだという認識です。
わたしは、普段、Windows環境で作業してますので、Windowsでの構築手順（わたしがやったこと）をご紹介します！
Rubyをインストール
Macでは標準装備らしいのですが、Windowsには入っていないのでインストールします。
http://rubyinstaller.org/downloads/
最新版をダウンロードしてインストールしてください。
インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れておきます。
コマンドプロンプトで、
%ruby -v
と打って、Rubyのバージョンが表示されればインストールが完了しています！
Sassをインストール
そのまま、コマンドプロンプトで作業を行います。
文字コードを指定
Windowsでは、文字コードがShift_JISに設定されているので、UTF-8に指定し直します。
%set LANG=ja_JP.UTF-8
RubyGemsを更新
Rubyに付属している、RubyGemsを更新します。
%gem update --system
RubyGemsからSassをインストール
わたしの場合は、なかなかインストールが始まりませんでしたが、気長に待つとインストールが完了します！
%gem install sass
Koalaをインストール
こちらのサイトからダウンロードして、インストールを行います。
Dreamweaverの環境設定
コーディングは全てDreamweaverを使用しているわたしなので、Dreamweaverの環境設定は外せません。拡張子の情報を認識させたり、コードヒントが出るようにします。
拡張子の認識
Dreamweaverを開いて、[編集]→[環境設定]→[ファイルタイプ/エディター]の「コードビューで開く」に”.scss”を追記します。
コードヒントが出るようにする
Dreamweaverがのインストールディレクトリ内の、”configuration/DocumentTypes”の中にある、MMDocumentTypes.xmlファイルを以下のように書き換えます。
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >
この部分を
↓
<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >
このように書き換えます。
実際に使ってみた
testというディレクトリを任意の場所に作成し、その中にstyle.scssというファイルを作成します。
Koalaを立ち上げ、testフォルダをそのままドラッグ＆ドロップします。
style.scssファイルをDreamweaverで開き、以下のコードを記述し（入れ子にしてみました！）、保存します。
#header-wrapper {
width:100%;
height:55px;
margin-bottom:20px;
#header {
width:800px;
height:50px;
margin:0 auto;
padding-bottom:10px;
}
}
すると、testフォルダ内に自動でstyle.cssというファイルが生成され、cssが吐き出されています。
#header-wrapper {
width: 100%;
height: 55px;
margin-bottom: 20px;
}
#header-wrapper #header {
width: 800px;
height: 50px;
margin: 0 auto;
padding-bottom: 10px;
}
入れ子の他にも、変数指定や、演算子など様々な機能が使えます。やりながら要領をつかむしか無いので、これからどんどん使っていきたいと思います！
参考
お世話になりました！！m(_ _)m
WindowsでSass環境を構築（Qiita [キータ] – プログラマの技術情報共有サービス）
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)（株式会社LIG）
