当サイトの記事には広告が含まれている場合があります

Windows10にSassをインストールしてみました

key
 

Windows10にSassをインストールしてみました。
WindowsにはRubyがインストールされていないので、Sassインストールの前にRubyをインストールする必要があります。
ついでにCompassもインストールしました。

スポンサーリンク

インストール手順

  1. Rubyのインストール
  2. Sassのインストール
  3. Compassのインストール

Rubyのインストール

まずはRubyのインストールです。
Rubyインストールファイルを下記からダウンロードします。

RubyInstaller for Windows
The easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...

「Download」ボタンをクリックします。
01_RubyInstaller
 

RubyInstallersからインストールしたいRubyのバージョンをクリックしてダウンロードします。
数字が大きいほど最新版です。
インストールしたいPCが64ビットなので、「Ruby 2.2.3(x64)」をダウンロードしました。
PCが32ビットの場合は、(x64)の記載がないものをダウンロードしてください。
02_RubyInstaller
 

任意の場所を指定してダウンロードします。
今回はデスクトップにしました。
03_RubyInstaller
 

デスクトップにダウンロードした「rubyinstaller-2.2.3-x64.exe」をダブルクリックしてインストール開始します。
04_RubyInstaller
 

画面の指示に従って進んでいきます。
05_RubyInstaller
 

「同意する」にチェックをいれて「次へ」
06_RubyInstaller
 

「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れて「インストール」
07_RubyInstaller
 

「完了」
08_RubyInstaller
 

これでRubyはインストールされました。
インストールされているか確認してみます。
「Windowマークキー + r」でファイル名を指定して実行画面をだし、「cmd」と入力します。
09_RubyInstaller
 

コマンドプロンプトが表示されるので、 ruby -v と入力して Enter を押します。
10_RubyInstaller
 

rubyのバージョンが表示されているので無事インストールされていることが確認できます。
11_RubyInstaller
 

Sassのインストール

次にSassをインストールします。
コマンドプロンプトを立ち上げて下記を入力して Enter を押します。

gem install sass

 

つらつらと英語が表示されてインストールされます。
13_RubyInstaller
 

きちんとインストールされていることを確認するため、 sass -v と入力して Enter を押します。
14_RubyInstaller
 

バージョンが表示され無事インストールされています。
15_RubyInstaller
 

Compassのインストール

次にCompassをインストールします。
基本はSassのインストールと同様です。

コマンドプロンプトを立ち上げて下記を入力して Enter を押します。

gem install compass

 

16_RubyInstaller
 

つらつらと英語が表示されてインストールされます。
17_RubyInstaller
 

きちんとインストールされていることを確認するため、 compass version と入力して Enter を押します。
18_RubyInstaller
 

バージョンが表示され無事インストールされています。
19_RubyInstaller
 

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
html・css
スポンサーリンク
くるりんをフォローする
Memorandums