Sublime Text3でSassを使える環境を作る windows編

sass_for_windows

久しぶりの更新。
WindowsのPCに入れてるSSDが壊れてしまって環境を作り直しです。
(ついでにMacにも入れたので次回にでもMac編を・・・)

久しぶりに自宅のPCでSassを使おうとコンパイルしてみたらエラーが・・・
そうです。
上記SSDが壊れた事件でRubyやらなんやらを入れていませんでしたw

忘れないためにもここに書いておこうかと思います。(今回はWindows編です)

まずはrubyをインストールします。

Ruby installer for windowsのページへGO!

ruby

ダウンロードしたファイルをクリックでインストーラーが立ち上がります。
言われてた通り進めていき完了。
※環境変数のところだけチェックを入れました。

次はバージョンチェック

コマンドプロンプトを立ち上げて 「 ruby -v 」と打ってエンター
コマンドプロンプトの立ち上げ方は、タスクバー左下のWindowsボタンを押して「プログラムとファイルの検索」のところに「cmd」って打つと「cmd.exe」が出てくるのでクリックしてください。

ruby2

ちゃんと最新版のインストールができていればOK

ruby3

こんな感じ。

gem(Rubyのパッケージ管理)を最新版にアップデート

さっきと同じ画面で gem update –systemと入力
※gemはRubyに標準で入ってるライブラリ?なのかな、インストールとかリムーブが簡単にできちゃうってやつらしい。。
違ったら教えてください

ruby4

スクショし忘れてましたが問題なければ
Latest version currently installed. Aborting.」って返ってきます。

最後にSassのインストール

次は「gem install sass」と入力しEnter

ruby5

すんなりいきました。
(本当は紆余曲折、波乱万丈でしたが、そのことについては今度)

さてさてやっとSublime Textの登場です。
Ctrl + Shift + p でPackage Controlを開き install Packageを選択

sublime

Sublime Textで下記パッケージを入れます。

  1. Sass
  2. Sass Build
  3. SCSS
  4. SCSS Snippets
  5. Compass(自分はCompassも入れてるので)

さて完了です。

さてconfig.rbを作って設定していざ!!

無事にscssファイルをコンパイルできました・・・

すんなりいけばこの手順で完了するはずです。

関連記事