Sass、Compass はじめの一歩。

Sass を使い始めて2年位経ちます。まだまだ、使いこなせてはいないのですが、コーディングするうえで無くてはならないくらいにはなってきました。
最近、会社のPC が変わったので、Sass をイチからセットアアップしなければいけなかったのですが、最初に参考書を見ながらやったっきりなのでやり方が分からない。。。
というわけで、備忘録として記事にしておこうと思います。

Ruby をインストールする

Windows の場合

Sass には Ruby が必要なので、まずは Ruby がインストールされているか確認します。
コマンドププロントを起動、下記を入力し Enter を押します。

ruby -v

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 -v

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

Sass のインストール

Windows の場合

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

gem install sass

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

sass -v

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

Mac の場合

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

sudo gem install sass

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

sass -v

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

Compass のインストール

Windows の場合

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

gem install compass

Mac の場合

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

sudo gem install compass

バージョンを確認する

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

compass -v

アップデートする

Windows の場合

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

gem update compass

Mac の場合

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

sudo gem update compass

プロジェクトの作成

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

compass create

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

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

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

require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

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

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

Compass でコンパイル

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

compass w

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

タイトルとURLをコピーしました