SCSS (Sass)を使用することに決めた前回。

今日は、SCSS (Sass)を使える様にするためのアプリとか黒い画面を導入するまでのことを書き留めておこうと思います。

Rubyのインストール（Windowsのみ）

WindowsへRubyをインストールします。

ダウンロードページに進むとインストーラーのリンクがあります。

ダウンロードが終わったらexeをダブルクリックして起動し、セットアップを開始。

Nextボタンを押してつぎへ。

ダウンロード先の選択になります。RubyのディレクトリまでにUnicode文字が含まれてるとエラーが出たりするので、ドライブ直下にしておくのが無難です。

2つめのチェックしておくと後で自分でPATHの設定をしなくて済みます。

インストールボタンを押し、あとはひたすら完了まで次へつぎへで。

インストールが終わったらコマンドプロンプトを立ち上げて確認します。

と入力してEnter。

バージョンが表示されれば使える状態になっています。

Sassのインストール

そのまま続けて、Sassのインストールをしましょう。

次のコマンドを入力してEnterを押すと、Sassのインストールが始まります。

Compassもインストール

ついでに便利なCompassもインストールしておきます。

コマンドが入力できるようになったらインストール完了です。

エンコーディング問題も解決しておく

WindowsでRubyを動かすと規定の外部エンコーディングが Windows-31J になるので「Invalid Windows-31J character…」というエラーが出てしまいます。

解決方法として、環境変数LANGを指定します。

コマンドを入力してEnterを押す。

か、もしくは、コントロールパネル→ システム→ 環境変数の編集でLANGを追加します。

これで、環境は整いました。

あとは、実際に書いてコンパイルしていくという段階になるのですが、その前に。

SCSS (Sass)対応アプリ

コンパイルをやっつけてくれるアプリケーションが色々とリリースされていますので、こちらを利用すると簡単に構築出来ます。

各アプリの導入については手順を紹介している記事にリンクを貼らせて頂きましたので、そちらをご覧ください。

1.　Scout

項目	内容
OS	Mac, Win
対応	Sass, Compass
価格	Free

2.　koala

項目	内容
OS	Mac, Win, Linux, Ubuntu
対応	Sass, Compass, Less, CoffeeScript
価格	Free

3.　Prepros

項目	内容
OS	Mac, Win
対応	Sass, Compass, Less, CoffeeScript, Stylus, Jade, Javascript, Haml, Markdown, Slim
価格	Free

3つほどアプリをあげさせて頂きましたが、もっとあるので興味のある方は調べてみてください。有料のものなども含めるとたくさんあります。

ちなみに実際にわたしが、現在使用しているのは、Preprosというアプリです。

見た目、機能ともにとても気に入って使っています。