Coda 2 で Sass を使う

Coda 2.0.13 で Sass を使うよ！！以下参考にさせていただいたページ。

Sass をインストール

$ sudo gem install sass

これだけ！かんたん！

Coda-Sass-Plug-in をインストール

secca/Coda-Sass-Plug-in をダウンロード。Coda-Sass-Plug-in-master.zip を解凍すると、中に SassPlug-in.zip があるのでさらに解凍。すると Sass.codaplugin が出てくるのでダブルクリックでインストール。Coda2 の再起動をしなくても反映されていました。

Sass ファイルを作ってみる

拡張子 .scss のファイルを作って control + shift + S すると、.scss と同じ階層（変更可能）に .css のファイルに変換されます。使い方はこれだけ！かんたん！！

Coda-Sass-Plug-in の設定を変更する

Coda2 のメニューバープラグイン → Sass → Sass Preferences… をクリックすると設定画面が開きます。

Css Save Folder Path

変換後の .css を保存する場所を指定

Path is relative to scss file: .scss ファイルから見た相対パスで指定
Path is absolute: 絶対パスで指定

Make css save folder if needed: 指定されたフォルダがない場合フォルダを作る

Css Creation

Automatically make css files when saving scss files: .scss ファイルを保存したとき、自動的に .css に変換する…ですが、なんと Coda 2 では使えないそうです。がびーん。

自動変換できないとしょんぼり

しかし解決策を見っけた。

So after some digging and some modifying we present a plugin for Coda 2 to automatically compile your handcrafted Sass into CSS for you whenever you save a Sass file in Coda.

How to use Sass in Coda – Elbongurk

なんと Coda 2 用のプラグインがあったー！

coda-sass-plugin をインストール

keegnotrub/coda-sass-plugin から Sass.codaplugin.zip をダウンロード。解凍して出てきた Sass.codaplugin をダブルクリックでインストール。今回は同名のプラグインがすでにインストールされていたので置き換えますか？みたいな小窓が出てきてインストール後に Coda 2 を再起動しないとならんかったけど、いきなりこっちのプラグインをインストールしたら問題ないと思われる。

以下、coda-sass-plugin を「Coda 2 用のプラグイン」と呼びます。名前似ててややこしいよね。

早速使う

.scss を作ってファイルを command + S で保存（要するに普通に保存）すると、同じ階層に .css ができたー！ひゃっほうー！

Coda 2 用のプラグインの設定を変更する

Coda2 のメニューバープラグイン → Sass Preferences… をクリックすると設定画面が開きます。このプラグインは変換後の .css を保存する場所の指定はできなさそうです。

Output Style

Nested または Compressed から選択できる。expanded が読みやすそうだけど選択できないんだべかね。

Debug Info

よくわからんがこの辺の設定だろうね。

None
Print comments above CSS rules
Generate source maps

Debug Info の Print comments above CSS rules

Output Style が Nested のときのみ使える。

/* line 1234, / ファイルまでのパス / ファイル名.scss */
body {
  CSS の内容 }

こうなる。

Debug Info の Generate source maps

Output Style が Nested でも Compressed でも使える。

/*# sourceMappingURL= ファイル名.map */

これが .css に追加されていて、

{
  "version": 3,
  "file": "ファイル名.scss",
  "sources": ["ファイル名.scss"],
  "names": [],
  "mappings": "ほにゃ,らら,ひゃっ,ほう"
}

という内容のファイル名.map というファイルが生成される。用途はよくわかりません！！

expanded で変換したいですよね

したいんですが、これまで試した 2 つのプラグインでは（簡単には）できなさそうでして…後半へ続く！！