SCSSとCompassをSublime Text2で使ってみる

Sublime Text2でSCSSとCompassを使うための設定を試してみたので、そのメモ。

こちらの記事を参考にさせていただきました。
コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編 ｜ Developers.IO

Rubyのインストール

RubyInstaller for WindowsからRubyの最新版をダウンロード。
ダウンロード後、ファイルを実行してインストールします。

途中、「Rubyの実行ファイルへ環境変数PATHを設定する」という項目がありますので、
チェックを入れておきます。

後はそのままインストールを実行。
　

SASSとCompassのインストール

Windowsキーを押して「cmd」で検索し、コマンド プロンプトを起動します。
ruby -v と入力して、バージョンがインストールしたものと同じか確認します。

次にSASSをインストールします。
gem install sass と入力。

エラーが出ました。
ググってみると、GemサーバーのSSL証明証エラーでインストールできないことがあるようです。

インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 – 公式サポートサイト

ダウンロード先を一時的にhttps から httpに変更することで、インストールできるようです。
gem source -a http://rubygems.org/ と入力して、ダウンロード先をhttpに変更。

確認メッセージが出るので、 y を入力。
これでダウンロード先がhttpに変更されました。

再度 gem install sass と入力。

SASSがインストールできました。
最後にCompassをインストールします。
gem install compass と入力。

Compassも無事インストールできました。
ダウンロード先を元に戻す場合、 gem source -r http://rubygems.org/ と入力します。
　

必要なPackageのインストール

Sublime Textへもどり、Ctrl + Shift + p で Command Paletteを開きます。
以下の4つのPackageをインストールします。

• Compass
• Sass
• SCSS
• SCSS Snipets

試してみる

サンプル用に作成したフォルダをドラッグ＆ドロップでSublime Textに入れます。
以下のような構成になっています。

• sample/
  • css/
  • scss/
  • index.html

左側にプロジェクト一覧が表示されます。

次に、Compassの初期設定を行います。
sampleディレクトリ直下にconfig.rbファイルを作成して、次のように記述します。

sass_dir = "scss"
css_dir = "css"
output_style = :expanded
line_comments = false

さらに細かく設定する場合、こちらが参考になりました。
[Compass] 超訳 Configuration Reference | WebTecNote

Sublime Textでのビルド設定を変更します。
Tools > Build System > Compass を選択します。

scssディレクトリ内にstyle.scssファイルを作成して、サンプルとして以下のように記述します。

@import "compass";

#header {
	width: 100%;
	.inner {
		width: 960px;
		margin: 0 auto;
		@include pie-clearfix();
	}
	.header-logo {
		float: left;
	}
	.gnav {
		float: right;
	}
}

Ctrl + b でコンパイルします。
コンパイルが成功すると、下部にFinishedと表示され、cssディレクトリにstyle.cssが出力されます。

style.cssは以下のように出力されています。

#header {
  width: 100%;
}
#header .inner {
  width: 960px;
  margin: 0 auto;
  *zoom: 1;
}
#header .inner:after {
  content: "";
  display: table;
  clear: both;
}
#header .header-logo {
  float: left;
}
#header .gnav {
  float: right;
}