Sass+Compassの導入、SublimeText2でビルドして、Chrome DevToolsでscssを確認できるようにする
うう…タイトルが長い…なんということだ…
ということで今回のテーマは
です。
ちなみに…Mac限定です。Winの方はもしもうまく行かなかったらお調べいただくということで…お願いします…。
Sass+Compassってなに？
まずはコレです。
SassとはCSSのメタ言語、そしてCompassはそれを利用したフレームワークです。
って……え？
要するにCSSがイケイケで書けるようになります。
なのでSass+Compassが使えるようになれば、あなたはイケイケです。
Rubyをインストールする
Windowsの方はまずはRubyをインストールして下さい。
Macの方は既に最初から入っているので必要ありません。
ちなみにWinで環境構築したことがないので、もしもWinの場合は…
調べてみてください…インストールはこちら
Sassをインストールする
アプリケーション→ユーティリティ→ターミナルを開いて下さい
そして下の呪文を入力してEnterを押して下さい。
sudo gem install sass
呪文を正しく入力するとパスワードが求められるので入力して下さい。
しばらく待つと呪文がたくさん勝手に出てきてインストールが終了します。
Winの方もたぶん同じような感じで行けますたぶん。
Compassをインストールする
再びアプリケーション→ユーティリティ→ターミナルを開いて
新しい呪文を入力してEnterを押して下さい
sudo gem update --system
うまくいきましたか？そして次の呪文を入力してEnterです
sudo gem install compass
これでインストール完了です。
SublimeText2でビルドする
Sass+Compassはコンパイルという作業をしないとCSSとして利用することができません。
GUIのツールでもコマンドラインでも行うこともできますが、今回はSublimeText2を使ってやってみたいと思います。
ちなみにSublimeTextは結構人気のテキストエディタです。
導入がまだ、という方はこちらを読んでインストール・初期設定を済ませて下さい。
http://mnemoniqs.com/web/sublimetext2/
さて、ここからはSublimeTextのPackage Controlが設定済みという前提で話を進めます。
Command＋Shift＋PでPackage Controlを立ち上げ、次のパッケージをインストールします
- Sass
- SASS Build
- SCSS
- SCSS Snipet
- Compass
これで準備おけーです。
ビルドする！！！
では試しにやってみましょう。
デスクトップに「sample」というフォルダを作ります。
そして「sample」フォルダをターミナルにドラッグ&ドロップします。
ここに呪文を打ち込みます
compass create
するとどうでしょう、たちまちsampleフォルダの中には
- config.rb
- sassフォルダ
- stylesheetsフォルダ
ができあがります。
それではsassフォルダにsample.scssというファイルを作り
以下の内容を入力して下さい。
@import "compass";
div{
background:red;
padding: 10px;
text-align: center;
@include border-radius(10px, 10px);
}
入力したらTools→Build SystemでCompassを選択し
Command＋Bをします。すると…
Stylesheetsフォルダの中にあら不思議…
sample.cssが生成されているではありませんか…
HTMLファイルも作りましょう。index.htmlという名前でsampleフォルダに作りましょう。以下にサンプルコードを載せておきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<link rel="stylesheet" href="stylesheets/sample.css">
</head>
<body>
<div>Sass+Compass</div>
</body>
</html>
そろそろ息切れしてきましたね…
ここで一つ問題が。
ChromeのDevToolsで確認すると、装飾を付けた部分はCSSでしか表示されません。
しかし私達が実際にいじったりするのはSCSSです。どうすればいいのでしょう…
Chrome DevToolsでscssを確認できるようにする
ターミナルを再び立ち上げ呪文を唱えます
sudo gem install sass --pre
sudo gem install compass-sourcemap --pre
無事にこの処理がすんだら今度はsampleフォルダに入っているconfig.rbを開き
sass_options = { :sourcemap => true }
と追加します。
これでSublimeTextでCompassビルドをします。
すると…
あら不思議、stylesheets内にsample.css.mapというファイルが
できているではありませんか…
こいつがあればChrome DevToolsでscssの内容を直接確かめることができます。
index.htmlを開き、要素の検証をして該当箇所を見てみると…
その場所のscssの内容が見れるはずです。
うまくいかない場合はChromeのバージョンを確認して下さい（現時点で32です）
そしてDevToolsの設定を確認して下さい。↓
……ということで
Sass＋CompassのインストールからSublimeText2でのビルド、Chrome DevToolsでscssの確認ができるようになったはずです。
長々とお付き合いいただきありがとうございました。
あ〜〜〜3回ぐらいに分ければよかったとちょっと反省です。
おやすみなさい( ˘ω˘ )ｽﾔｰ
