SublimeText3でSCSSを扱う環境を整える手順｜Compassも導入するよ！

SCSSがもっと普及しますように…というわけで、SublimeText3でSCSSを記述→CSSにコンパイル出来る状態にするまでの流れを解説します。 SublimeText3の導入記事はこちら。 SCSSの記述方法についてはこちら。 ちなみに、以前にもSublimeText3でのSass環境導入記事を書いています。 今回の記事は以前書いた記事の修正版です。

Rubyの導入

下記のリンクからOSに合わせたRubyをダウンロード、インストールします。
この時「Pathを通す」みたいなチェック項目が出てくるはずなので、忘れずにチェックしましょう。 インストールが完了したら、コマンドプロンプト（Win+R → cmdと打って実行）を開き、「ruby -v」と入力してEnter。これでRubyのバージョンが表示されたらインストール完了です。 ちなみに「Pathを通す」のチェックを忘れていると、こんなエラーが出ます。 この状態になったら環境設定をいじる必要があります。

「コントロールパネル→システム→システムの詳細設定→詳細設定タブ→環境変数」を開き、「システム環境変数」内にある「Path」をダブルクリック。そして変数値の末尾に「C:Ruby\bin;」を追加します。これで再度コマンドを実行してみましょう。

gemのアップデート及びSass、Compassのインストール

コマンドプロンプトから、以下の3つのコマンドを順番に実行します。 全て完了したら、次はSublimeText3側の操作を開始します。

SublimeText3にパッケージを導入

導入するパッケージは以下の5種類。

• Sass
• SASS Build
• SCSS
• SCSS Snippet
• Compass

「Ctrl+Shift+P」でPackageControlを開き、「Install Package」で上記のパッケージを導入しましょう。

ビルドシステムの変更

「Tool」→「Build System」→「Compass」を選択します。

簡単なサンプルを実行してみよう

SCSSのサンプルを用意しました。 解凍したフォルダ内の「css/scss/style.scss」をSublimeText3で開き、「Ctrl + B」でビルドしてみましょう。「css/style.css」が生成されたら成功です。 SCSSの機能を使っていろいろとサンプルを記述しといたんで、初心者の方は参考にどうぞ…

config.rbとは

サンプルのCSSフォルダ内にある「config.rb」とは、Compassを使うための設定ファイルです。各ディレクトリの位置をconfig.rbから見た相対パスで指定したり、コンパイル時にコメントを残すかどうか等の設定が可能です。 このファイルだと、SCSSファイルの入力が「scss」フォルダ、CSSの出力先が1階層上の「css」フォルダになります。

フォルダ構成さえ同じにすれば他のプロジェクトでも使いまわせるので、雛形を作っておくと便利です。

---

以上がSublimeText3でSCSS環境を構築するまでの流れです。最低限の手順しか書いていないので、エラーが出た時はググるなりLeoTiger_7にリプライを送るなりしてください。

環境を整えるまでは大変ですが、それを乗り越えれば快適なSCSS生活の始まりです。頑張って！