アイデアハッカーアイデアハッカーページの先頭へトップに戻る2014年3月15日ソフトウェアSublimeText3でSass,Compassが使える環境を整える手順ツイートSass環境を作るために必要な「Ruby」の導入、そして「SublimeText3」でSass(SCSS)をコンパイル出来るようになるまでの手順を解説します。ついでにプロジェクトのサンプルも載せておくので、環境さえ整えばすぐにSassコーディングが可能です。注意!この記事は「SublimeText3」でSassを扱えるようになるまでの手順をまとめたものですが、@LeoTiger_7が環境を整えたのは去年のことで、若干記憶が曖昧になっています。途中でかなり無理矢理な進め方をするので、記事の通りに進めても全く動かないかもしれません。それでもやるぞ!って人だけ続きをどうぞ...まず最初に、まだSublimeText3を導入していないという方はこの記事を参考に導入しておいてください。導入から設定まで詳しく解説するよ!あと、この記事ではSassの機能については一切触れていないので、Sassって何?って人はこちらの記事をどうぞ。CSSの拡張メタ言語、Sassの書き方を簡単に解説するよ!Rubyの導入Sassを扱うためにはRubyをインストールする必要があります。以下のリンクからOSに合わせた最新のRubyをダウンロード、インストールしましょう。-v」と入力しEnterを叩きます。こんな感じでRubyのバージョンが表示されれば導入完了です。ファイルとして認識されていません。これが出ると少しめんどくさいです。環境変数からRubyまでのPathを通さなくてはいけません。タブ→環境変数」を開きます。次に下の「システム環境変数」内にある「Path」をダブルクリックし、変数値の末尾に「C:Rubybin;」を追加します。-v」を実行してみてください。上手くいってればRubyのバージョンが表示されます。--system」と入力して実行し、gemをアップデートします。sass」と入力して実行し、Sassをインストールします。compass」と入力して実行し、Compassをインストールします。Compassっていうのは、Sassをもっと便利に使うための拡張機能のようなものです。これが無いと色々と困ります。SublimeText3の設定で詰むここが一番厄介なポイントです。SublimeText2なら、PackageControlから簡単に必要なパッケージをインストール出来るんですが、SublimeText3だと検索しても見つからないという。ちなみに必要なパッケージは以下の5つ。SnippetsCompassここはもう無理矢理突破するしかなさそう...具体的に言うと、SublimeText2で各パッケージをインストールし、そのパッケージをコピーしてSublimeText3にぶち込みます。強行突破まずはCompassからいきますか...以下のフォルダを開き、Compassをぶち込みます。3PackagesCompassはこちらから。compass.zip次に他4つのパッケージを以下のフォルダにぶち込みます。Packages各パッケージをzipにまとめておきました。Sass_Package.zip荒業ですが、@LeoTiger_7はこれで普通に使えています。いうか再配布が禁止されてたらどうしようサンプルプロジェクトを受け取ってくれッ!これで準備は整ったんですが、Compassを使うためには設定ファイル(config.rb)を作ったり色々と大変です。いうわけで、5分で作った「すぐにSCSSのお勉強が出来るプロジェクト」を配布します。SCSS_Sample.zipビルドに関してはこのプロジェクトを元に解説を進めます。build出来るか確認まず、ビルドシステムを「Compass」に変更します。ついでに先程配布したプロジェクトの「SCSS_Samplecssscssstyle.scss」をSublimeText3で開いておいてください。B」でビルドしてみましょう。○○s」と出たら成功で、style.scssをビルドして生成されたstyle.cssが、1つ上の階層にあるCSSフォルダに出力されます。style.scss」ですけど。エラーコードみたいなのがゴチャゴチャ出てきたら失敗なので、少し前の手順からやり直す、もしくは他のサイトの情報を見つつ頑張ってください...config.rbさっきちょっと書きましたが、Compassを使うためにはconfig.rbという設定ファイルが必要になります。上記の設定だと入力元がscssフォルダ、ビルドした際の出力先がconfig.rbと同じcssフォルダになります。その他にも必要そうな設定は一通り書いておいたので、フォルダ構成さえ同じにすれば他のプロジェクトにも使い回せるはずです。してもエラーが出るという方は...本当に申し訳ないんですが、この通りにやっても出来ない人にはSublimeText2をオススメします。解説サイトもたくさんあるし...ただ、@LeoTiger_7はSublimeText3でSass環境を整えることが出来たので、2じゃなきゃ絶対無理ということはない、とだけ言っておきます。あと、コメント欄やTwitter等で質問してくれれば出来る限り答えますし、もっとスマートな方法があるなら記事もどんどん修正していくつもりです。最後にお願いなんですが、この手順通りにやってみて動いたか動かなかったかを報告してくれるとありがたいです。動いたという報告が全く無かったら、被害者を増やしてしまう前に記事ごと消します。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。