【Sass+Compass】MACに導入から、デベロッパーツールとの連携まで。

SASSとは

SASSとはCSSのコード修正、管理がちょっと楽になるメタ言語。
メタ言語というとちょっと難しく聞こえますが、全然簡単なので安心してください。

MACにSassをインストールする

ターミナルで以下のコマンドを入力し、sassをインストールします。

sudo gem install sass --pre

バージョンの確認とアップデートは以下のコマンドで。

sassバージョン確認

デベロッパーツールとの連携はSass3.3以上が必要になります。

.scssファイルをコンパイルする

以下のコマンドを入力し、.scssファイルを保存すると自動的にコンパイルできます。

sass --sourcemap --watch style.scss:style.css

–sourcemap:.mapファイルを作成します。
–watch:フォルダの中の全てのSCSSファイルを監視して、セーブしたら自動的にCSSフォルダにCSSファイルを書きだします

デベロッパーツールで確認

デベロッパーツールでみると.scssファイルが参照されているのが確認できます。

Compassもいれてみる

Sassに機能を追加できるCompassもついでに入れてみます。

sudo gem install compass

config.rbの中身。ディレクトリを適当に指定してください。

equire '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"

sass_options = {:sourcemap => true}
sass_options = { :debug_info => true }

sourcemap = true

適当な名前をつけ、フォルダを作成。

compass create test

作成したフォルダに移動して、以下のコマンドで自動コンパイルの設定。

compass watch

以上でとりあえずSASS+Compassで書き始めることができます。

さいごに

scssファイルをデベロッパーツールの「Sources」タブでリアルタイムにレンタリングを反映させたかったのですが、今回の方法ではSource map生成して、Element > Style から 対応箇所の確認までしか出来ていません。やり方が分かる方はコメントで教えていただけると嬉しいです。

TincrというChromeの拡張機能を使えば更新しリアルタイムでレンタリング可能とのことですが、Browserボタンが押しても反応しないという問題があり、断念しました。

Mac Chrome version: 40.0.2214.94

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD