Sass環境を作るために必要な「Ruby」の導入、そして「SublimeText3」でSass（SCSS）をコンパイル出来るようになるまでの手順を解説します。ついでにプロジェクトのサンプルも載せておくので、環境さえ整えばすぐにSassコーディングが可能です。
注意！
この記事は「SublimeText3」でSassを扱えるようになるまでの手順をまとめたものですが、
@LeoTiger_7が環境を整えたのは去年のことで、若干記憶が曖昧になっています。しかも途中でかなり無理矢理な進め方をするので、記事の通りに進めても全く動かないかもしれません。
それでもやるぞ！って人だけ続きをどうぞ…
まず最初に、まだSublimeText3を導入していないという方はこの記事を参考に導入しておいてください。結構時間掛かりますが…
あと、この記事ではSassの機能については一切触れていないので、Sassって何？って人はこちらの記事をどうぞ。
Rubyの導入
Sassを扱うためには
Rubyをインストールする必要があります。以下のリンクからOSに合わせた最新のRubyをダウンロード、インストールしましょう。
インストールが完了したら、コマンドプロンプトを開いて「ruby -v」と入力しEnterを叩きます。
こんな感じでRubyのバージョンが表示されれば導入完了です。
表示されないという方は…
'Ruby' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。
これが出ると少しめんどくさいです。環境変数からRubyまでのPathを通さなくてはいけません。
まず「コントロールパネル→システム→システムの詳細設定→詳細設定タブ→環境変数」を開きます。次に下の「システム環境変数」内にある「Path」をダブルクリックし、変数値の末尾に「C:Rubybin;」を追加します。
これでRubyまでのPathは通ったはずなので、もう一度コマンドプロンプトから「ruby -v」を実行してみてください。上手くいってればRubyのバージョンが表示されます。
gemのアップデート
コマンドプロンプトに「gem update --system」と入力して実行し、gemをアップデートします。
正直Rubyに関しての知識が無いのでgemっていうのが何なのかはよく分からないんですが、とりあえずやっておいたほうが良いらしい…
Sass & Compassのインストール
コマンドプロンプトに「gem install sass」と入力して実行し、Sassをインストールします。
コマンドプロンプトに「gem install compass」と入力して実行し、Compassをインストールします。
Compassっていうのは、Sassをもっと便利に使うための拡張機能のようなものです。これが無いと色々と困ります。
SublimeText3の設定で詰む
ここが一番厄介なポイントです。
SublimeText2なら、PackageControlから簡単に必要なパッケージをインストール出来るんですが、SublimeText3だと検索しても見つからないという。困った。
ちなみに必要なパッケージは以下の5つ。
- Sass
- SASS Build
- SCSS
- SCSS Snippets
- Compass
ここはもう無理矢理突破するしかなさそう…具体的に言うと、SublimeText2で各パッケージをインストールし、そのパッケージをコピーしてSublimeText3にぶち込みます。
強行突破
まずはCompassからいきますか…
以下のフォルダを開き、Compassをぶち込みます。
C:Usersユーザー名AppDataRoamingSublime Text 3Packages
Compassはこちらから。
次に他4つのパッケージを以下のフォルダにぶち込みます。
C:Usersユーザー名7AppDataRoamingSublime Text 3Installed Packages
各パッケージをzipにまとめておきました。
荒業ですが、
@LeoTiger_7はこれで普通に使えています。
ていうか再配布が禁止されてたらどうしよう
サンプルプロジェクトを受け取ってくれｯ！
これで準備は整ったんですが、Compassを使うためには設定ファイル（config.rb）を作ったり色々と大変です。
というわけで、5分で作った「すぐにSCSSのお勉強が出来るプロジェクト」を配布します。
ビルドに関してはこのプロジェクトを元に解説を進めます。
build出来るか確認
まず、
ビルドシステムを「Compass」に変更します。
ついでに先程配布したプロジェクトの「SCSS_Samplecssscssstyle.scss」をSublimeText3で開いておいてください。
それでは「CTRL + B」でビルドしてみましょう。下のように「Finished in ○○s」と出たら成功で、style.scssをビルドして生成されたstyle.cssが、1つ上の階層にあるCSSフォルダに出力されます。変更を加えていなかったら「unchangeed style.scss」ですけど。
エラーコードみたいなのがｺﾞﾁｬｺﾞﾁｬ出てきたら失敗なので、少し前の手順からやり直す、もしくは他のサイトの情報を見つつ頑張ってください…
config.rb
さっきちょっと書きましたが、Compassを使うためにはconfig.rbという設定ファイルが必要になります。
上記の設定だと入力元がscssフォルダ、ビルドした際の出力先がconfig.rbと同じcssフォルダになります。
その他にも必要そうな設定は一通り書いておいたので、フォルダ構成さえ同じにすれば他のプロジェクトにも使い回せるはずです。
どうしてもエラーが出るという方は…
本当に申し訳ないんですが、この通りにやっても出来ない人にはSublimeText2をオススメします。解説サイトもたくさんあるし…
ただ、
@LeoTiger_7はSublimeText3でSass環境を整えることが出来たので、2じゃなきゃ絶対無理ということはない、とだけ言っておきます。
あと、コメント欄やTwitter等で質問してくれれば出来る限り答えますし、もっとスマートな方法があるなら記事もどんどん修正していくつもりです。
最後にお願いなんですが、この手順通りにやってみて
動いたか動かなかったかを報告してくれるとありがたいです。動いたという報告が全く無かったら、被害者を増やしてしまう前に記事ごと消します。
関連するかもしれない記事
