Coda 2.0.13 で Sass を使うよ!!以下参考にさせていただいたページ。
- SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。
- SassをCoda2で使う | Webデザイン | いいなもっと.com
- 効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! | Webクリエイターボックス
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 つのプラグインでは(簡単には)できなさそうでして…後半へ続く!!