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 拡張をインストールします。

sass-item

アイテムの追加に SCSS ファイルがありますね。

Sass の Visual Studio 拡張は、今回は使っていませんが、SassyStudio というのも以前からあるようです。

CSS へコンパイル

ツール オプションの Web Essentials の項目から、SCSS ファイルの保存時や、ビルド時に CSS ファイルの生成を行う設定があるのでこれを利用します。

tool-option

コンパイル結果は、出力ウィンドウに表示されています。コンパイルできれば、SCSS と同じ場所に .css と .min.css ファイルが生成されます。

output

[WEB ESSENTIALS] メニューの [Re-compile All SASS Files] も利用できます。

web-essentials-menu

注意 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 フォルダーを一式プロジェクトに追加します。

project

Furatto の js フォルダー内の JavaScript ファイルもプロジェクトに追加します。

エラーの修正

ダウンロードしたバージョンは、_forms.scss にセミコロンが連続している箇所がありエラーになるので修正しました。

SCSS: furatto.scss compilation failed: C:\temp\FurattoSample\FurattoSample\style\/furatto/forms:37: error: invalid top-level expression

form

コンパイル

SCSS ファイルの保存時にコンパイルするよう設定していれば、furatto.scss を保存すれば CSS ファイルが出力されます(依存関係の解決の問題で、_ から始まるファイルの保存からはエラーになる)。

完了!

Web ページからコンパイルした CSS ファイルを参照すれば完了です。

barebones

navigation_bar の背景色を黒から青に変更した結果です。