ELIFE眞空 ぼちぼちいきます

日常自分が忘れてしまいそうなことをクリップしています。

WindowsでSassを使う

 

前回インストールして、放置していたモノがSSLの証明書期限切れでエラーが出て、アップデート出来なったので、入れなおすことにしました。

 

その際、すっかり忘れていて、色々調べるハメになったので、今回は書き留めておこうと思います。

 

1.とりあえずRubyインストール

Sassを使うには、Ruby環境が必要なので、何はともあれ、Rubyのインストール。

リンク:Downloads

 

2016年7月現在、以下のとおりなので、最新版2.3.0を選択してダウンロード。

f:id:enjoylifevc:20160704152350p:plain

 

では、インストールしていきます。

f:id:enjoylifevc:20160704152720p:plain

言語を「日本語」にして、「OK」をクリック。

 

f:id:enjoylifevc:20160704153029p:plain

「同意する(A)」のラジオボタンを選択し、「次へ(N)」

 

 

f:id:enjoylifevc:20160704153600p:plain

Rubyの実行ファイルへ環境変数PATHを設定する」

「.rbと.rbwファイルをRubyに関連づける」の2つにチェックを入れ、

「インストール(I)」

※「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックし忘れると、手動でPATHを通さなければ、いけなくなりますので、ご注意を。

※.rbと.rbwファイルをRubyに関連づける」にチェックを忘れても対して問題はなさそうだけど、.rb(コンソールで動くRubyスクリプト)と.rbw(Winで動く、GUIRubyスクリプト)をRubyと関連付けてくれるので、ファイルをダブルクリックするだけで、Rubyスクリプトが実行できるようになり便利。

 

f:id:enjoylifevc:20160704154917p:plain

お疲れ様でした。

 

 

コマンドプロンプトで、確認してみましょう。

ショートカットキー:Win+「R」+「cmd」と入力し、「ENTER」クリック

 

まずは、Rubyのバージョンチェック。

 

ruby -v」と入力。

C:\Users\hogehoge\ruby -v

ruby 2.3.0p0 (2015-12-25 revision 53290) [x64-mingw32]

 と表示されれば、OKです。

 

 

2.Sassをやっとインストール

Rubyをインストールしたので、gemが使えるようになりました。

ここからの作業は、コマンドプロンプトでgemコマンドを使って行ないます。

ちゃんとgemが動くか確認するために、バージョン確認をしておきます。

 

「gem -v」と入力

C:\Users\hogehoge\gem -v

2.5.1

 と表示されれば、OKです。

 ちなみにバージョンが古い場合は、

「gem update --system」でアップデートできます。

 

次に、文字化けを防ぐために、文字コードの設定をします。

「set LANG=ja_JP.UTF-8」と入力。

特に何にも起こらないです。

 

それでは、Sassをインストールしましょう。

「gem install sass」と入力

Fetching:Sass-3.4.22.gem(100%) 

Successfully insatalled sass-3.4.22

.........

1 gem installed

と表示されれば、OKです。

 

バージョンの確認をします。

「sass -v」と入力

Sass 3.4.22 (Selective Steve)

と表示されれば、OKです。

 

こちらも因みに、バージョンが古い場合は

「gem update sass」でアップデートできます。

 

コレで、やっとSassを使える環境が整いました。

それでは、sassコマンドを使って、cssファイルのコンパイルに挑戦してみてください。

 

 

それについては、また次回に書くとします。