アイデアハッカーアイデアハッカーページの先頭へトップに戻る2014年12月4日Web制作SublimeText3でSCSSを扱う環境を整える手順|Compassも導入するよ!ツイートSCSSがもっと普及しますように...というわけで、SublimeText3でSCSSを記述→CSSにコンパイル出来る状態にするまでの流れを解説します。SublimeText3の導入記事はこちら。導入から設定まで詳しく解説するよ!SCSSの記述方法についてはこちら。CSSの拡張メタ言語、Sassの書き方を簡単に解説するよ!ちなみに、以前にもSublimeText3でのSass環境導入記事を書いています。今回の記事は以前書いた記事の修正版です。下記のリンクからOSに合わせたRubyをダウンロード、インストールします。この時「Pathを通す」みたいなチェック項目が出てくるはずなので、忘れずにチェックしましょう。-v」と入力してEnter。これでRubyのバージョンが表示されたらインストール完了です。ちなみに「Pathを通す」のチェックを忘れていると、こんなエラーが出ます。ファイルとして認識されていません。この状態になったら環境設定をいじる必要があります。タブ→環境変数」を開き、「システム環境変数」内にある「Path」をダブルクリック。変数値の末尾に「C:Ruby\bin;」を追加します。これで再度コマンドを実行してみましょう。gemのアップデート及びSass、Compassのインストールコマンドプロンプトから、以下の3つのコマンドを順番に実行します。compass全て完了したら、次はSublimeText3側の操作を開始します。導入するパッケージは以下の5種類。Package」で上記のパッケージを導入しましょう。System」→「Compass」を選択します。簡単なサンプルを実行してみようSCSSのサンプルを用意しました。B」でビルドしてみましょう。「css/style.css」が生成されたら成功です。SCSSの機能を使っていろいろとサンプルを記述しといたんで、初心者の方は参考にどうぞ...config.rbとはサンプルのCSSフォルダ内にある「config.rb」とは、Compassを使うための設定ファイルです。各ディレクトリの位置をconfig.rbから見た相対パスで指定したり、コンパイル時にコメントを残すかどうか等の設定が可能です。このファイルだと、SCSSファイルの入力が「scss」フォルダ、CSSの出力先が1階層上の「css」フォルダになります。フォルダ構成さえ同じにすれば他のプロジェクトでも使いまわせるので、雛形を作っておくと便利です。以上がSublimeText3でSCSS環境を構築するまでの流れです。最低限の手順しか書いていないので、エラーが出た時はググるなりLeoTiger_7にリプライを送るなりしてください。環境を整えるまでは大変ですが、それを乗り越えれば快適なSCSS生活の始まりです。北海道在住の元気な22歳。右手に酒、左手に煙草、目の前にPCという生活。クズだけどいい人(ただし彼女はいない)。今欲しいのはリボルトの実機。