Sass、Compass はじめの一歩。

calendar

Sass を使い始めて2年位経ちます。まだまだ、使いこなせてはいないのですが、コーディングするうえで無くてはならないくらいにはなってきました。

最近、会社のPC が変わったので、Sass をイチからセットアアップしなければいけなかったのですが、最初に参考書を見ながらやったっきりなのでやり方が分からない。。。

というわけで、備忘録として記事にしておこうと思います。

Ruby をインストールする

Windows の場合

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

コマンドププロントを起動、下記を入力し Enter を押します。

Ruby のバージョンが表示された場合は、すでにインストールされています。
表示されたバージョンが1.9以下の場合は、既存のRubyをアンインストールして、再インストールしてください。

では、Ruby をインストールします。

Ruby の公式サイトにアクセスし(http://rubyinstaller.org/)、Download をクリック、RubyInstallers から最新版をダウンロードします。
OS が 64bit の場合は、(x64) と書かれている方をダウンロードしてください。

ダウンロードしたら、exe ファイルをダブルクリックしてインストールします。

【インストール先とオプションの設定】画面では、『Rubyの実行ファイルへ環境変数PATHを設定する』にチェックをしてください。

sass-compass01

インストールが完了したら、コマンドプロントを一旦閉じて再起動します。
コマンドプロントに [ruby -v] と入力して、バージョンが表示されたらインストールは成功です。

Mac の場合

Mac は Ruby が既にインストールされています。
ターミナルで、下記コマンドを実行してみましょう。

バージョンが表示されたら、Ruby はインストールされています。

Sass のインストール

Windows の場合

コマンドプロントで以下コマンドを実行します。

インストール後、以下コマンドでバージョンを確認します。

バージョンが表示されれば、正しくインストールできています。

Mac の場合

ターミナルで以下コマンドを実行します。

インストール後、以下コマンドでバージョンを確認します。

バージョンが表示されれば、正しくインストールできています。

Compass のインストール

Windows の場合

コマンドプロントで、以下コマンドを実行します。

Mac の場合

ターミナルで、以下コマンドを実行します。

バージョンを確認する

以下コマンドでバージョンを確認できます。

アップデートする

Windows の場合

コマンドプロントで、以下コマンドを実行します。

Mac の場合

ターミナルで、以下コマンドを実行します。

プロジェクトの作成

Compassを使用するには、プロジェクトを作成する必要があります。
プロジェクトを作成したいフォルダへ移動(コマンドプロント or ターミナル)し、下記コマンドを実行します。

すると、[sass][stylesheets]フォルダと、[comfig.rb]ファイルが作成されます。
[sass][stylesheets]フォルダは必要なければ削除して構いません。
重要なのは、[comfig.rb]ファイル
このファイルが、プロジェクトの設定ファイルです。

[comfig.rb]ファイルの設定

[comfig.rb]ファイルを開くと、以下のようになっていると思います。

http_path → プロジェクトのパス
css_dir → CSSファイルのパス
sass_dir → sassファイルのパス
images_dir → 画像ファイルのパス
javascripts_dir → javascriptファイルのパス

それぞれの、パスを自分で使用するディレクトリ名に変更します。

Compass でコンパイル

caompass でコンパイルするには、以下コマンドを実行します。

以上です。

これで、コンパスを使う第一歩を踏み出せますね!