Windows7にSass環境を構築するのに色々あった件

先週末、XOOPS Cube勉強会に出席しかなり盛り上がりました(^^)/。詳細はきっと次のOSCあたりで明らかになると思いますが、なかなか楽しいことになりそうです。そういう気持ちが盛り上がったときに帰りに本屋さんに寄ったときに「Web制作者のためのSassの教科書」を買いました。そういうときの勢いってありますよね。
ということで早速環境構築を、とやり始めてみたらやはりすんなりとはいかなかったので、それについて書きます。

そもそもSass（サス）って？

Webシステムを作ることを本業としてますが、デザイナーでなくてもやはりCSSを触る機会はどんどん増えてきました。CSSはプログラムでは無いので変数を使って定義したりできないし、同じ事を繰り返してやったりするのにコピーペーストするのが面倒だなと思っていました。もっとプログラムみたいに書けたら楽だし、間違いも減るのにと。

SassはCSSをコンパイルして作成するもので、元ファイルでは変数や繰り返し（関数的？）が記述できるもののようです（まだ環境構築までなので詳しくはわからないのですが）。

となるとやらんと！とは思ってました。

ちなみに買った本はこちらです↓

Rubyのインストールをします

本に書いてあるとおりRubyのインストールをします。

http://rubyinstaller.org/

このサイトで　Download　をクリック

一覧から　Ruby 2.1.5 (x64)　をクリックすると、　rubyinstaller-2.1.5-x64.exe　というファイルがダウンロードされます。

ダウンロードしたファイルを右クリックして　管理者として実行　をクリック。

日本語　なので　次へ　をクリック

同意する　にチェックをして　次へ　をクリック

このページでは必ず　Ruby の実行ファイルへ環境変数 PATH を設定する　にチェックを付けます。そして、　インストール　をクリック。

インストールが進み

この画面が出たら完了です。

コマンドプロンプトで、　ruby -v と入力

あぅ、、PATHが通っていない？

しかし本をよく見ると

前からコマンドプロンプトが開いていた場合は（でした）、一度コマンドプロンプト画面を閉じて

再度開いてから実行すると、ちゃんとインストールされたのが確認できました(^^)/

Sassのインストールでちょっとつまづきました

そしていよいよSassのインストール。

gem install sass

と入力すればすぐに終わるはずだったのですが、

こんな画面になり、エラーになってしまいました。

これを実行したときにこういう画面が出ていたのでファイアーウォールの設定のせいかなと思ったんですが（アクセスを許可するをクリックしませんでした）、コントロールパネルからこのインストーラーに対してファイアーウォールをかけない（？）設定にしてもやはりエラーは消えませんでした。

ググってみたら色々情報があったのですが、

WindowsにSASSをインストールする時にエラーが出た時の対処法

こちらを参考にさせていただきました(^^)/。

まずはcドライブに　sass（名前は何でもいい）　というフォルダを準備しておいて、

https://rubygems.org/gems/sass

このページの

右下にあるDownload　をクリック

ファイルを先ほど作ったフォルダ　sass　に保存します。

それから、コマンドプロンプトで　cd c:\sass で新しく作ったフォルダに移動しておいてから、

gem install sass

でこのようにSassのインストールが終わりました(^^)/

Sassの動作確認　コンパイルしてみる

インストールは無事終わった感じがするのですが、本当にちゃんとできたのかをコンパイルして試してみたいと思います。

2-4 Sassコマンドの使い方を覚えよう

このページにある

このコードをコピーして、名前を　mikatest.scss　として保存します。

コマンドプロンプトでファイルを保存したディレクトリに移動して、

sass sassのファイル名:CSSのファイル名

このように入力します。

なにも起こっていないようですが、ディレクトリをみてみると

このようにCSSファイルとmapファイルができてました。これでSassが正常に動作していることが分かりました(^^)/

おまけ：別のインストール方法でかなりややこしい謎に出会った

実は上記のやり方をするまでに、かなりの時間を要しました(^_^;。

というのもせっかく本を買ったのにURLを打ち込むのが面倒だと思ってググって見つけたページからインストールをして途中ですごく解明に時間がかかる問題にかかずらわっていたからです。

解決した後に、本を見たところ「そもそもRubyをインストールするためにダウンロード下ファイルが違っていた」ということに気づきました(^_^;。なので、まぁ失敗してたのですが後でも使えそうな技を発見したので書いておきます。

こんな感じのエラーが出ていました。

‘””C:\Program’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

sass が見付からないというならともかく、この　c:\Program　って？ということでググりましたが日本語でこの情報を書いているページはここしかありませんでした。

JavaDBメモ

こちらを見ると、

バッチファイル内にjavaコマンドを実行する箇所があるのだが、そこがダブルクォーテーションで囲まれていない為。
修正すれば動くようになる。

このように書いてありました。そしてなるほど、これなんだなーと思いました。しかしみんなが使ってるはずのbatが間違ってるとか（このときダウンロードファイルを間違えていることは気づいていません(^_^;）、なぜ？

とにかくバッチを見つけないとと思って　sass.bat　で検索したら発見。

そして開いてみて

""C:\Program Files 

確かにダブルコーテーションが2つ付いているところがありました。そしてそれを1つにして保存したら、、動きました(^_^;。

これでこういうエラーが出たときはそのバッチファイルを見て直す、という方法が分かった、というおまけでした。