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を設定する』にチェックをしてください。
インストールが完了したら、コマンドプロントを一旦閉じて再起動します。
コマンドプロントに [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
以上です。
これで、コンパスを使う第一歩を踏み出せますね！
