WindowsにRubyとSassをインストールする方法

Windows（Windows 7）環境でSassを使う機会があり、Sassをインストールしました。SassをインストールするにはRubyが必要です。Rubyのインストール方法はMacと異なる部分が多いので、RubyのインストールからSassのインストールまでの一連の流れをまとめておきます。

はじめに

Sassはプログラミング言語の「Ruby」で実装されており、Sassを使用するにはRubyの環境が必要です。なので、お使いの環境にRubyがインストールされていなければ、事前にインストールしておく必要があります。

Macでは、Rubyをインストールする方法として、rbenvやRVMのようなRubyのバージョン管理ツールを使うことが一般的だったりします。

しかし、これらのツールはWindowsには対応していません（対応させるにはWindows内にUNIXライクな環境を構築するためのCygwinなどを使います）。ただ、今回はあくまでもSassを使うだけなので、Windows用のインストーラーを使ってRubyをインストールすることにしました。

RubyをWindowsにインストール

WindowsマシンにRubyをインストールするには、Rubyの公式サイトでも案内されている「RubyInstaller」を使います。

以下のサイトより「RubyInstaller」をダウンロードします。

RubyInstallerをダウンロードしたら、インストーラーを起動します。「実行」ボタンを押すと、インストールが開始しますので、手順に従って進めていきます。

インストールの途中で、以下のような「インストール先とオプションの指定」画面が出てきます。「ruby の実行ファイルへ環境変数 PATH を設定する」と「.rb と.rbw ファイルを Ruby に関連づける」にチェックを入れて（下の画像は、チェックを入れてキャプチャー取るの忘れてます…）、「インストール」ボタンを押します。

Rubyのインストールが完了したら、Windowsの[スタート]メニューの「すべてのプログラム」のところに表示されます。

コマンドプロンプト上で確認する場合は、コマンドプロンプト上で[ruby -v]コマンドを実行します。バージョンが表示されれば、インストール成功です。

C:\User\maechabin>ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [i386-mingw32]

Sassをインストールする準備（gemの設定）

Rubyをインストールすると、RubyGems（gem）というNode.jsでいうnpmのようなパッケージ（ライブラリ）が使えるようになります。gemは[gem]コマンドでインストールします。Sassも[gem]コマンドでインストールします。[gem]コマンドを使えるようにしていきます。

gemの確認と設定

gemはRubyをインストールすると使えるようになります。念のためコマンドプロンプトを開いて、[gem -v]コマンドを実行し、gemがインストールされているか確認します。バージョンが表示されれば、インストール成功です。

C:\User\maechabin>gem -v
2.4.5.1

日本語を使うとエンコーディングの問題でエラーが出るので、あらかじめ環境変数LANGの指定を「UTF-8」に変更しておきます。

C:\User\maechabin>set LANG=ja_JP.UTF-8

gemのアップデート

[gem update ––system]コマンドで、gemを最新の状態にアップデートします。

C:\User\maechabin>gem update --system

Proxy認証の必要な環境だとエラーとなり、gemのアップデートができません。

ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
    Errno::ETIMEDOUT: A connection attempt failed because the connected party did not prope
nd after a period of time, or established connection failed because connected host has fail
pond. - connect(2) for "api.rubygems.org" port 443 (https://api.rubygems.org/specs.4.8.gz)

Proxy認証の必要な環境の場合は、以下のようにProxyの設定を行います。

C:\User\maechabin>set http_proxy=http://[認証ID]:[パスワード]@[proxyのURL（ホスト）]:[ポート番号]

Proxyの設定をしたら、再度[gem update ––system]コマンドで、gemを最新の状態にアップデートします。

C:\User\maechabin>gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.5.0.gem (100%)
Successfully installed rubygems-update-2.5.0
Parsing documentation for rubygems-update-2.5.0
Installing ri documentation for rubygems-update-2.5.0
Installing darkfish documentation for rubygems-update-2.5.0
Done installing documentation for rubygems-update after 2 seconds
Parsing documentation for rubygems-update-2.5.0
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 2.5.0
RubyGems 2.5.0 installed
Parsing documentation for rubygems-2.5.0
Installing ri documentation for rubygems-2.5.0

=== 2.4.8 / 2015-06-08

Bug fixes:

* Tightened API endpoint checks for CVE-2015-3900

=== 2.4.7 / 2015-05-14

Bug fixes:

* Limit API endpoint to original security domain for CVE-2015-3900.
  Fix by claudijd

=== 2.4.6 / 2015-02-05

Bug fixes:

* Fixed resolving gems with both upper and lower requirement boundaries.
  Issue #1141 by Jakub Jirutka.
* Moved extension directory after require_paths to fix missing constant bugs
  in some gems with C extensions.  Issue #784 by Andre Arko, pull request
  #1137 by Barry Allard.
* Use Gem::Dependency#requirement when adding a dependency to an existing
  dependency instance.  Pull request #1101 by Josh Cheek.
* Fixed warning of shadowed local variable in Gem::Specification.  Pull request
  #1109 by Rohit Arondekar
* Gem::Requirement should always sort requirements before coercion to Hash.
  Pull request #1139 by Eito Katagiri.
* The `gem open` command should change the current working directory before
  opening the editor.  Pull request #1142 by Alex Wood.
* Ensure quotes are stripped from the Windows launcher script used to install
  gems.  Pull request #1115 by Youngjun Song.
* Fixed errors when writing to NFS to to 0444 files.  Issue #1161 by Emmanuel
  Hadoux.
* Removed dead code in Gem::StreamUI.  Pull request #1117 by mediaslave24.
* Fixed typos.  Pull request #1096 by hakeda.
* Relaxed CMake dependency for RHEL 6 and CentOS 6.  Pull request #1124 by Vit
  Ondruch.
* Relaxed Psych dependency.  Pull request #1128 by Vit Ondruch.


------------------------------------------------------------------------------

RubyGems installed the following executables:
        C:/Ruby22/bin/gem

Ruby Interactive (ri) documentation was installed. ri is kind of like man
pages for ruby libraries. You may access it like this:
  ri Classname
  ri Classname.class_method
  ri Classname#instance_method
If you do not wish to install this documentation in the future, use the
--no-document flag, or set it as the default in your ~/.gemrc file. See
'gem help env' for details.

RubyGems system software updated

アップデートが終わったら、念のため[gem -v]コマンドで、バージョンを確認します。

C:\User\maechabin>gem -v
2.5.0

SassをWindowsにインストール

gemが最新の状態になったら、早速Sassをインストールしていきます。

Sassのインストール

[gem install sass]コマンドをコマンドプロンプト上で実行して、Sassをインストールします。

C:\User\maechabin>gem install sass
Fetching: sass-3.4.19.gem (100%)
Successfully installed sass-3.4.19
Parsing documentation for sass-3.4.19
Installing ri documentation for sass-3.4.19
Done installing documentation for sass after 8 seconds
1 gem installed

インストールはサクッと終わると思います。インストールが終わったら、念のため[sass -v]コマンドで、Sassがインストールされているか確認します。バージョンが表示されれば、インストール成功です。

C:\User\maechabin>sass -v
Sass 3.4.19 (Selective Steve)

Sassのアップデート

念のため、[gem update sass]コマンドを実行して、インストールしたSassを最新の状態にしておきます。自分の場合は、すでに最新版となっていました。

C:\User\maechabin>gem update sass
Updating installed gems
Nothing to update

再度[sass -v]コマンドで、バージョンを確認します。

C:\User\maechabin>sass -v
Sass 3.4.19 (Selective Steve)

SassをCSSに変換

これで、Sassを使う準備は整いました。あとは、好きなエディタで好きなようにSassを書いていきましょう。Sassの書き方や仕様などは以下を参考にしてください。

sassコマンドでcssファイルにコンパイル

Sassを書いたら、cssとして使うためにコンパイルが必要です。一番簡単な方法として[sass]コマンドを使う方法を紹介しておきます。sass/scssファイルのあるフォルダに移動して、sass/scssファイルの後に出力したいcssファイルを「:」でつなげて[sass]コマンドを実行します。

C:\User\maechabin>sass aaa.scss:bbb.css

ただ、これだと毎回コマンドを打つ必要があり面倒です。––watchオプションをつけて実行すると、ファイルの状態を監視して、自動でコマンドを実行してくれるようになります。

C:\User\maechabin>sass --watch aaa.scss:bbb.css

sassコマンドの詳細については以下のサイトを参照してください。

Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 – 公式サポートサイト

とりあえず一番使うであろうscssファイルのコンパイル時に、圧縮した状態でcssファイルを吐き出すコマンドを紹介しておきます。

C:\User\maechabin>sass aaa.scss:bbb.css --style compressed

まとめ

以上でWindows上でもSassが使えるようになりました。MacでrbenvやRVMを使って環境を整えるのと比べたらだいぶ楽ではないでしょうか。PostCSSの時代が来ていると言われていますが、まだまだフロントエンドの開発においてcssをSassで書くことも多いかと思います。普段の開発はMacがメインであったとしても、Windowsでも使えるようにしておくと何かと便利になるのではないかと思います。

Sassはcssの設計手法の一つであるBEMを書くためにあると言ってもいいくらい、Sassを使うとBEMが簡単に書けるようになっています。自分の場合は、Sassを使うようになってからBEMで書くようになりました。すごくおすすめなので、当ブログの以下の記事を紹介しておきます。

BEMをSassで快適に書く方法 – maesblog

Sassの仕様や書き方などは上記で紹介したサイトや以下の書籍などを参考にしてもらえたら良いと思います。

**『Web制作者のためのSassの教科書これからのWebデザインの現場で必須のCSSメタ言語』**
著者: 平澤隆, 森田壮
出版社: インプレスジャパン
発売日: 2013年9月13日
ISBN: 978-4844334668

カテゴリー: Web技術
CSS Ruby Sass 開発環境

maesblog