Hello Sass!

コマンドかアプリか

Sass(あるいは他のCSSメタ言語)を利用するときに立ちはだかる最初の難関はインストールです。

公式サイトではいずれもコマンドライン(CUI)での利用方法しかありませんが、最近はコンパイルをやっつけてくれるアプリケーションが色々とリリースされていますので、黒い画面が苦手という方はアプリケーションをインストールする方が楽だと思います。

Sassに対応したアプリの紹介

アプリを使えばRubyやSassのインストールをする必要がありません。
その代わりSassがバージョンアップした時はアプリが対応するまで待ちが生じます。

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

Scout

SassとComapssを使うだけならScoutで十分だと思います。
コマンドラインよりも圧倒的に設定が分かりやすいです。

OS Mac, Win
対応 Sass, Compass
価格 Free

Compass.app

その名の通りSass+Compassのためのアプリです。起動するとメニューバーに常駐するのが特徴。有料です。

OS Mac, Win, Linux
対応 Sass, Compass
価格 $10
  • 記事がありませんでした…orz

CodeKit

CUI嫌いなMacユーザーならこれ入れておけばおk。な高機能アプリ。
メタ言語のコンパイルの他にMinifyとか画像の最適化とかもやれますが有料です。

OS Mac(OS 10.7以上)
対応 SASS, Compass, LESS, Stylus, CoffeeScript, SLIM, HAML, Jade
価格 Mac $25

LiveReload

Scoutよりも高機能ですが有料です。タグ埋め込みorブラウザの拡張を入れることで自動リロードもしてくれます。
Windowsはアルファなので無料みたいですが、いずれは有料になるのでしょう。

OS Mac(OS 10.6以上、64bitのみ), Win(XP以上), Linux
対応 SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade
価格 Mac $9.99

コマンドライン操作での導入方法

Rubyのインストール(Windowsのみ)

MacはRubyが既に入っているのでこの手順は必要ありません。Sassのインストールへどうぞ。

WindowsへのインストールはRubyInstallerを使うのが手っ取り早いです。

RubyInstaller Logo

ダウンロードページに進むとインストーラーのリンクがバージョンごとにリストアップされています。
一番上をクリックすると最新バージョンのダウンロードが始まります。

ダウンロードページ左上のインストーラー選択エリア
2012/12月時点でのデザイン

exeファイルがダウンロードされるまで少し待ちます……
exeアイコン
ダウンロードが終わったらexeをダブルクリックして起動してください。

Rubyのセットアップが始まります。
お馴染みのライセンス確認はI acceptにチェックを入れてNext。

SetUp

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

オプションの 「Add Ruby executables to your PATH」 はチェックしておくと後で自分でPATHの設定をしなくて済みます。  「Associate .rb and .rbw files width this Ruby installation」 はファイルの関連付けなのでお好みで。

Installボタンを押すとインストールが始まります。

Select install folder
Install complete

インストールが終わったらコマンドプロンプトを立ち上げて確認します。
スタートメニューの検索で「cmd」と入力してEnterを押せば黒い画面が起動します。

スタートメニューでRubyを探してStart Command Prompt with Rubyを実行してもいいです。 スタートメニューのRubyフォルダ

ruby -vと入力してEnterを押したとき、バージョンが表示されれば使える状態になっています。

コマンドプロンプトでRubyのバージョンを表示

Sassのインストール

Rubyのバージョン確認が出来ていれば、続けてSassのインストールができます。

Macの場合はここから始めてください。

コマンドプロンプト(win)またはターミナル(Mac)で
次のコマンドを入力してEnterを押すと、Sassのインストールが始まります。

gem install sass
Install Sass gem

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

導入の説明はこれでおしまいです。