@ Sass

Sassのインストール

Sass ファイルの拡張子は「.scss」でブラウザが認識できません。そのため、Sass ファイルを CSS にコンパイルする必要があります。

コンパイルとは、コンピュータが直接実行可能な形式のプログラム(オブジェクトコード)に変換することです。

コンパイルをするには、Ruby と Sass をインストールする必要があります。

Rubyのインストール

Sass には Ruby が必要なので、Ruby がインストールされているか確認します。

Rubyのバージョンを確認する

コマンドプロントを起動して、Ruby のバージョン確認コマンドを入力します。

$ ruby -v

次のように表示される場合は、Ruby がインストールされていないので、インストールに進みます。

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

Rubyのインストール

Ruby のインストール手順は以下のとおりです。

  1. rubyinstaller.org にアクセスして [ Download ] をクリック。
  2. 最新版の Ruby 2.2.4 をクリックして installer をダウンロードします。
  3. rubyinstaller-2.2.4.exe をクリックするとインストールが開始されます。
  4. [ インストール先とオプションの指定 ] 画面では、[ Rubyの実行ファイルへ環境変数PATHを設定する ] にチェックをいれてください。

再度Rubyのバージョンを確認する

コマンドプロントを起動して、Ruby のバージョン確認コマンドを入力します。

$ ruby -v

次のように Ruby のバージョンが表示されれば、インストール完了です。

ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]

Sassのインストール

Sass のインストールには gem コマンドを使います。gem とは Ruby にあらかじめバンドルされているパッケージ管理ツール「RubyGems」のことで、gem コマンドを使って Sass を簡単にインストールできます。

$ gem install sass

Sassのバージョンを確認する

$ sass -v

次のようにSassのバージョンが表示されます。

Sass 3.4.21 (Selective Steve)

Gem サーバーの SSL 証明書エラーにより、Sass をインストールできない場合には、ダウンロード先の rubygems.org の URL を一時的に https から http にすることでインストールができます。

「souce -a」オプションで http の URL を指定してコマンドを実行します。

$ gem source -a http://rubygems.org/
https://rubygems.org is recommended for security over http://rubygems.org
Do you want to add this insecure source? [yn]   

セキュリティ上 https を推奨するとメッセージが出ますがこのままでは、インストールできないので、「y」を押してEnterキー。

Do you want to add this insecure source? [yn]  y
http://rubygems.org/ added to sources

「http://rubygems.org/ added to sources」と表示されダウンロード先の URL が登録されます。これでインストールコマンドが実行できるはずです。

インストール完了後、https 接続のみに戻す場合は、「souce -r」オプションで http の URL を削除します。

$ gem source -r http://rubygems.org/