最近、色んなエディタやツールがいっぱいでどれを使ったらいいのやら…という感じですよね。

私は Coda を Coda1のときから長く使っているんだけど、
話題のSublime Text2に変えようかな？とか

「PhpStormというのがすごくいいから使ってみて」

っておすすめしてもらったりして、Sublime Text2 と PhpStorm を入れてみたりしました。

うん。確かにどちらもすごく良さそう。

でも長く使ってる Coda もこの機会にもうちょっと使いやすくしてみよう、と思って色々やってみたのでまとめておきます。

Sassの導入

Sass に関してはすでに導入済みでした。

Mac で Sass を使えるようにするには Mac のターミナルで

$ gem install sass

と書いてあげればいいです。私はだいぶ前に入れていたのでターミナルで Sass のバージョンを調べました。

$ sass -v

結果は3.2.1で、今は3.2.7なのでアップデートします。

アップデートには、ターミナルで

$ gem update sass

と書いてあげるだけ。

これで最新版の Sass になりました。

Coda2 の Sass 用のプラグイン

Coda には Sass 用の Coda Sass Plug-in というプラグインがあります。

github にあるCoda-Sass-Plug-inをインストールすると、

このように書き出すCSSの場所を指定できたり、「コントロール＋シフト＋S」で　.scss のファイルを保存すると、自動的に .css のファイルを書きだしてくれるようになります。

Coda で Sass を書くなら絶対入れたほうが便利ですよね！

Coda にプラグインをインストールするには？

ちなみに、Coda にプラグインをインストールにはダウンロードしたプラグインのファイルをダブルクリックするだけ。

インストールされたプラグインは

ライブラリ ＞ Application Support ＞ Coda ＞Plug-ins

にあるので必要なくなったらここから削除して Coda を再起動すれば大丈夫です。

Coda2 に Compass の導入

今回やりたかったことはこれ。

Sass を入れるなら Compass も入れないと、と思っていたのになかなか腰が上がらなかったんです。

ということで重い腰あげて、 Compass を導入。

とはいえ、 Compass のインストールは、ターミナルで

$ gem install compass

って書いてあげるだけ。

これだけで Compass が使えるようになります。

————————————————————-
Mac は Ruby がもともと入っているので上記の手順でインストール出来ますが、
バージョンが低いことがあります。

gem update --system

で最新のものにしてから、SassやCompassを導入します。

————————————————————-

Coda2 のターミタルと Compass の合わせ技

Compass はただ入れただけじゃ使えません。

ターミナルから操作しなくてはいけないんだけど、ちょっと面倒。

だけど、Compass を使うだけのために他のアプリ立ち上げるのもそれはそれで面倒。

ここで、Coda 内臓のターミナルの出番です。

Macのターミナルと違うのは、Codaでサイトを定義しておけば、
Coda 内臓のターミナルを立ち上げた時点で、サイトのlocalhostに自動接続してくれること。

Last login: Sat Mar  9 15:42:22 on ....
You have mail.
Macの名前:~ ユーザー名$ cd /Volumes/Macintosh\ HD/Users/サイトのパス
Macの名前:サイトの名前（フォルダ名） ユーザー名$

書き換えちゃったのでわかりにくいけどこんな感じ。
移動の手間がないのは嬉しい♪

ここから Compass を使っていきます。

Compass を使う準備

Codaのターミナルで次のように書いて見ます。

compass create

そうするとこんなふうにどわわわーーーっと何やら始まって、

あっという間に

設定用のファイル　config.rb　
書き出した時のキャッシュが記録されるフォルダ　.sass-cache　
.scssの入るフォルダ　　　sass　
.cssの入るフォルダ　stylesheets

が作られます。

Compass の初期設定

config.rb　の中身はこんな感じ

# 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

ここで色んな設定も変えられるし、ディレクトリの名前も変えられるんだけど、
特にディレクトリ名は後から変えるのは面倒なので、この設定で嫌な人は compass create するときにちょっと付け足すといかも。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images" --no-line-comments

–sass-dir は Sass のディレクトリ
–css-dir　は CSS のディレクトリ
–javascripts-dir　は javascript のディレクトリ
–images-dir は image のディレクトリ

最後に書いた-no-line-comments
はSassをCSSに書きだした時に該当の行数がわかるようにコメントを入れてくれるのですが、
それを消したい場合に書くといいです。

でもこれは後でも変えられるので、作業中は行数を表示して、最後に書きだすときは消して書きだす、とかでもいいですね。

また書きだすCSSの書き方も　output_style　という設定項目で変えられます。
　
expanded 　→→→　普通のよくあるCSSの書き方
nested 　→→→　CSSをネストして書く
compact 　→→→　 一行にまとめてくれる
compressed 　→→→　コメントも削除して圧縮

こちらも制作中は expanded、最後には compressed で圧縮など、使い分けると良さそうです。

config.rbはこんなふうに変わります。↓

 Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# 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

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

既存のサイトに Compass 導入

えー。もうCSS とか Sass なんかのディレクトリ用意しちゃったよー、という時は　compass init　を使います。

compass init --css-dir "css" 

cssなんていうフォルダがある場合は　–css-dir “css”　のようにして指定してあげると
無駄に stylesheet というディレクトリを無駄に作られずにすみます。

設定は色々あるのでぜひ調べてみて下さい。私もこれから調べます！

Compass で Sass をコンパイル

Codaのターミナルで　

compass watch

と入れると、Sassのファイルを保存（コマンド+S）するたびにCSSののファイルを書きだして（コンパイル）くれます。

Sassのプラグインだけの時は「コントロール＋シフト＋S」だったのでちょっと面倒でしたが、
何も考えずに保存するだけで書き出してくれるのでとっても楽ちんです。

更に _main.scssというように はじめに　「　_　」をつけたSassは書き出されないので、
Sassの時点では細かくファイルを分けておき、それを一つの　style.scss などに @import でまとめて
それを、style.css として書きだす、ということをするととても便利ですね。

その際にも　_main.scss　などアンダーバー付きの Sass ファイルを保存しただけで、しっかりCSSが更新されました。

さらにさらに、Coda のプレビュー機能で html　をプレビューしていても、リアルタイムで プレビューが更新されましたよ！！

一度 compass watch と初めてしまえば、Coda　のターミナルを開きっぱなしにしておくだけでいいので
ほとんどターミナルのこともコンパイルのことも忘れて作業出来ました。

ターミナルには書き出しのログや、エラーしたときはその内容がどんどん記録されていくので、確認もできます。

他にターミナルを使いたくなったら、もう一つ開くだけでいいみたい。

compass watch を終了するには　ターミナル画面で　「コントロール + C 」を押せばいいだけです。

「Press Ctrl-C to Stop.」ってターミナルに書いてあるので忘れても大丈夫。

Codekit と合わせて使う

Mac では Codekit というアプリがあってこれもとても高機能で、
Sass や Compass でターミナルを使うような部分も、ターミナル無しでわかりやすく操作できます。

試して見ましたが、その他の機能を使わないなら、Coda2 のターミナルで十分だと思いました。

導入さえ終われば、ターミナルで書かないといけないのは　compass create　と　compass watch　くらいだし、
ターミナルもローカルなのでただ起動するだけですものね。

このへんは本当に必要に応じてだなぁーと思いました。

ということで、せっかく導入して気軽に使えるようになったので、
ガンガン使って覚えていこうと思います。

Coda のターミナルってほとんど使ってなかったけど、こうやって使うとけっこう便利ですね♪

それでは。