Coda2でSassとCompassを便利に使えるようにするための5つの呪文

黒い画面が全く苦手なOlein(@Olein_jp)です。

先日からどんな気まぐれかわかりませんが、「SassとCompassを触ってみたい!」という衝動に駆られ、どうしたら使えるのかをぼちぼち調べるようになりました。

Webのお仕事に関しては基本的にCoda2を利用しているので、できればCoda2ですべて完結できるようにしておくことが望ましいとも思っていました。

そんなこんなで環境を構築していったわけですが、ズラズラと説明をしても分かりづらいでしょう。ですので、簡単にサクサクっと僕みたいな黒画面素人でも設定できるように代表的な呪文だけを順に並べていこうと思います。

これらを順に入力していくだけで、Coda2でSassとCompassが使えるようになると思います。詳しく勉強したい!っていう方は、キーワードや呪文などを拾いながら検索して調べていただければと思います。

ヒアウィーゴー!

環境の説明

まずは僕の環境をご説明しておかないといけませんね。
zu
上の図を見ていただけるとだいたい分かるかとは思うのですが、ローカル開発環境はMAMPを使って動かしています。

通常ですと、フォルダーはローカルのMAMP内htdocフォルダを指定して使うのかもしれませんが、クラウド上のフォルダを指定しています。そうすることによって、別デバイス(僕はiMacとMBPを使っています)でデータ共有しやすくなります。

また、何も設定しないでMAMPを使っていくと、ローカルフォルダへアクセスする際に「http://localhost:8888」としなければいけないのですが、ちょっとうっとうしいので「http://localhost」になるように設定を変更して使っています。

参照:MAMPの初期設定 – MAMPの使い方

そして、Coda2では開発用というかSassやCompassの練習用のサイトを登録してあります。クラウド上にTestというフォルダを1つ作り、そこを拠点にするような流れです。

あとボク的な環境ですが、知識としては一応ドットインストールのUNIX講座をひと通りは見たことがありますが、全然黒い画面は使えません。かろうじて何も見なくても覚えているのは、フォルダに入るときのコマンド?だったっけ?「cd フォルダ名」しか覚えていません。こんなスペックでごめんなさい。

Coda2内でのサイトの設定はこんな感じになっています。
Coda2のサイト設定
共有フォルダ内に「test」というフォルダを作ってそこが大本(ルート)になるように設定しています。

環境はこんなかんじで進めていきますので、みなさんの環境に合うように以下読み替えてみてください。

いざ黒画面へ

ではCoda2にて作業を進めていきたいと思います。先ほどのような感じで設定したサイトから入っていきますと、こんな感じになります。

coda2-1

そして、右上の「+」というプラスボタンを押してターミナルを選択します。
cosa2-2

すると、どこに接続するのか聞いてくるので、localhostになっていることを確認して接続しましょう。
coda2-3

ほら出てきました黒画面((((;゚Д゚))))ガクガクブルブル
ローカルシェルという名前の分割ウィンドウが出てきました。
coda2-4

でも、あきらめないでっ!(古い)ここからは呪文をコピペしていけば設定できるように説明していきます。(でも、その後は自分で呪文の意味を調べることをおすすめします。いい勉強になりますよー!)

RubyGemsをアプデする

RubyGemsって何よって話になっちゃいますよね。まぁ、簡単に言うとRubyっていうプログラミング言語あるじゃないすか?そこらへんがもろもろパッケージでひとまとめになっているもの、みたいな感じだと思います。

そして、SassやCompassを使うためにはRuby環境が必要なので、まずはそのRubyさんを最新の状態にアップデートしておく作業を今から行います。

作業って言っても、この呪文を唱えてもらうだけでケッコーです。

sudo gem update --system

この呪文をコピーしてターミナルにペーストしてみます。

coda2-5

そしてenterを押します。すると、
coda2-7
パスワードを入力してください、と求められます。ここではルートのパスワード(アプリとかインストールしたりするときに使う大本のパスワード)を入力してください。

パスワードを入力してenterを押すと、アップデートが始まります。つらつらつらーっとコードが黒画面を駆け抜けていきます。最後にこのような状態になったら完了です。

coda2-8

Sassをインストールする

ちょっと丁寧に書きすぎて時間がかかってしまいました。続いてSassをインストールします。といっても、呪文を唱えるだけなんで簡単です。

sudo gem install sass

すると、先ほどと同じようにパスワードを聞かれますので入力してenterを押してあげます。ずずずっとインストールが開始されて、こんなメッセージが出てきたらオッケーです。

coda2-9

Successfully installed sass-3.2.12
Parsing documentation for sass-3.2.12
1 gem installed

Compassをインストールする

どんどんいきましょー!コピペだから簡単だよね!(でもコピペばかりだとスキルアップできないからちゃんと意味も調べてみようね!)

続きまして、Compassをインストールします。これも、呪文を1行唱えるだけでインストールできてしまいます。

sudo gem install compass

今回はパスワードを聞かれませんが安心してください(僕の仕様でだけかな?)

Fetching: chunky_png-1.2.9.gem (100%)
Successfully installed chunky_png-1.2.9
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.2.gem (100%)
Successfully installed compass-0.12.2
Parsing documentation for chunky_png-1.2.9
Installing ri documentation for chunky_png-1.2.9
Parsing documentation for compass-0.12.2
Installing ri documentation for compass-0.12.2
Parsing documentation for fssm-0.2.10
Installing ri documentation for fssm-0.2.10
3 gems installed

となれば終了です。これでSassとCompassを使えるようにするための設定は終わりです。

テストしてみる

これで基本的な環境整備は終了です。ちゃんと動くのかどうか試してみましょう。

先ほどSassやCompassをインストールしたときに使ったターミナルに戻って、以下の呪文を唱えてみましょう。

compass create

すると、ずらずらーっと文字が流れていきます。

coda2-10

それでは、ファイルがどうなったか見てみましょう。すると〜
coda2-11

さっきまで何もなかったtestフォルダになんかファイルができてる!!

そうなんです。さっきの呪文を唱えることによって、制作環境を一発で作ってくれるんですねー。これ素晴らしい。

自動的にSassを書き出してくれるように設定する

通常、Sassだけコードを入力して、コンパイル(cssに変換させる)するというのは手作業でした。手作業というのは、プラグインなどを用いてシュートカットキーで処理を開始させたりというような感じですね。もっと根本的だとターミナルからコードを打ってコンパイルしてという流れになります。

けれど、ぶっちゃけ面倒臭い!!ですよね。Sassを保存したら自動的にCSS書き出してくれよ!なんてわがままきいてもらえまs…もらえますか?

そうです。このコードを制作を開始する毎に入力するだけです。

compass w
もしくは
compass watch

たったこれだけです。これだけで僕のわがままを聞いてくれるのです!

本当かどうか試してみる

まずは、上記のコードをターミナルで入力してみます。

coda2-12
すると、「Compassはどこまででもお前の変更を追っかけて行くぜ!」(意訳)というメッセージが表示されます。あと、control+Cで監視を止めれますとも書いてあります。

では、試しにtestフォルダ内に先ほど作られたsassフォルダの中に新しいファイルを作ってみます。

style.scssというファイルを…
coda2-13
作ったら、即座に……
coda2-14
CSSファイルを作ってくれる!監視してくれてる!ことがよくわかりますね。

ちなみに、ターミナルの方のメッセージを確認してみると、
coda2-15

>>> Change detected at 13:20:13 to: style.scss
create stylesheets/style.css

何時何分にstyle.scssに変更があって、stylesheets/style.cssを作ったぜ

ちゃんと作ってくれたことがログで残っていますね。これすばらしー!

ちゃんとSassが動くかどうか試してみる

先ほど作ったstyle.scssに以下のコードを入力してみます。

#main {
font-size: 12px;
p {
color: #666666;
.red {
color: red;
font-weight: bold;
}}}

そして、保存してからstylesheetsフォルダ内のstyle.cssを開いてみましょう。こういうコードになっていれば成功です。

/* line 1, ../sass/style.scss */
#main {
font-size: 12px;
}
/* line 3, ../sass/style.scss */
#main p {
color: #666666;
}

/* line 5, ../sass/style.scss */
#main p .red {
color: red;
font-weight: bold;
}

coda2-16

まとめ

とりあえず最低限の設定の部分を説明してみました。僕もそうなんですが、なかなかコードの内容を最初は理解できません。ですが、ネットなどでみかけたコードの中身を調べてみるということを何度も繰り返すことによって覚えられるようになります。そして、それを自分で使ってみることによって自分のものにすることができます。

今回紹介した5つの呪文(コード)も最初はコピペだったのしても、一度自分で調べてみるべきでしょう。そうすることによってただコピペしているだけのときよりは理解が深められることは間違いありません。

ちょっとでもCoda2仲間が増えることを祈っております(僕の周りに少ないのでw)。乱文失礼しました。

参考にしたサイト様

今後はこちらの書籍で勉強していきたいと思います!