Visual Studio で Sass 製 Furatto を使う
Visual Studio で Sass (SCSS) を使ってみます。
Furatto
Furatto とは、Sass で書かれたフロントエンド フレームワークです。同種のものでは、Bootstrap が有名です。Bootstrap ほど高機能ではありませんが、イケてるサイトを簡単に作れるかも。
Visual Studio 2013 Update 2 & Web Essentials
環境は、Visual Studio 2013 Update 2 です。Update 2 から Sass に対応しているようです。さらに Web Essentials 2013 for Update 2 拡張をインストールします。
アイテムの追加に SCSS ファイルがありますね。
Sass の Visual Studio 拡張は、今回は使っていませんが、SassyStudio というのも以前からあるようです。
CSS へコンパイル
ツール オプションの Web Essentials の項目から、SCSS ファイルの保存時や、ビルド時に CSS ファイルの生成を行う設定があるのでこれを利用します。
コンパイル結果は、出力ウィンドウに表示されています。コンパイルできれば、SCSS と同じ場所に .css と .min.css ファイルが生成されます。
[WEB ESSENTIALS] メニューの [Re-compile All SASS Files] も利用できます。
注意 1
現時点で、プロジェクトのパスに日本語が含まれていると動作しません。日本語ユーザー名でデフォルトのドキュメントフォルダー以下にプロジェクトを作っているとダメです。全然使い物にならないんですが……。少し Web Essentials のソースコードを見てみると、Web Essentials は node-sass を起動しているだけのようなので、node-sass が日本語ダメなのかも。
注意 2
コンパイルのトリガーがよくわかりません。私の環境では、ビルド時や Re-compile メニューが動作していないことがありました。また、依存関係の解決もうまくできていないようです。きちんと動作したか出力ウィンドウのチェックと、結果のチェックが必要です。
Furatto を Visual Studio に追加
Visual Studio から Furatto を使えるようにします。
Furatto からファイルをダウンロードして src フォルダーの furatto.scss など一式をプロジェクトに追加します。
Compass CSS3 を利用しているので、chriseppstein/compass からダウンロードして、frameworks / compass / stylesheets 以下の compass フォルダーを一式プロジェクトに追加します。
Furatto の js フォルダー内の JavaScript ファイルもプロジェクトに追加します。
エラーの修正
ダウンロードしたバージョンは、_forms.scss にセミコロンが連続している箇所がありエラーになるので修正しました。
SCSS: furatto.scss compilation failed: C:\temp\FurattoSample\FurattoSample\style\/furatto/forms:37: error: invalid top-level expression
コンパイル
SCSS ファイルの保存時にコンパイルするよう設定していれば、furatto.scss を保存すれば CSS ファイルが出力されます（依存関係の解決の問題で、_ から始まるファイルの保存からはエラーになる）。
完了！
Web ページからコンパイルした CSS ファイルを参照すれば完了です。
navigation_bar の背景色を黒から青に変更した結果です。