Coda 2 で Sass を使う の続き。Compass を使うと自動変換できたり便利だそうで。以下参考にさせていただいたページ。
- CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp
- Compassの導入|sass|study|kanapple.net
- Coda2でSassとCompassを便利に使えるようにするための5つの呪文|Olein〜オレのインタレスティングなこと〜
- CodaとCompassを使う | Masterkey.jp
RubyGem を最新版にする
$ sudo gem update --system
Compass をインストール
$ sudo gem install compass
Coda 2 のターミナルで日本語が文字化け??????????????????
早速 Coda 2 に内蔵されているターミナルで Compass を使おうと思ったらうまくいかない。ええっ!と思って普通のターミナルでやったらできる。違いは日本語が表示されているかいないかくらいしか思いつかないのでぐぐったら自分のブログが(ry
Coda のターミナルでは日本語が使えない – p15.jp
ターミナルで日本語が文字化けしてしまう問題(今となっては自分の設定不足)が気になっていました。
ネットで調べてみても「Codaのターミナルは日本語が使えない!」というような記述があったため、てっきり使えないものだと決めつけていた
Coda2のターミナルの文字化けを解決する方法(恥)
:ビジネスをデザインするブログ:ITmedia オルタナティブ・ブログ
すいません使えないと決めつけていたネットの情報のうちの一人です。いやもしかしたら Coda では日本語バケラッタで Coda 2 だから解決策があるのかもしれないよね!上記の記事にて紹介されている解決策は、.bash_profile に以下を追記。
export LANG=ja_JP.UTF-8
直ったー!!日本語見えるー!!
Compass を使う
Coda 2 に内蔵されているターミナルを開くと、サイトに登録されているローカルルートを開いた状態で起動してくれるから便利ですね。早速 Compass を使ってみます。
$ compass create _sass --sass-dir "sass" --css-dir "../common/css" --javascripts-dir "../common/js" --images-dir "../common/img" -s "expanded" --relative-assets --no-line-comments --bare
引数を指定して、こんなかんじでどうでしょうか。–bare はターミナルで -h したら出てくる中に書いてあった。
public_html
_sass
sass
xxxxx.scss
config.rb
common
css
xxxxx.css
img
js
ディレクトリ構成はこうなる。ほんとは _sass フォルダを public_html の外側に置きたいんだけど、どうもうまくいかんかった。
Compass で監視 <●> <●>
$ cd _sass
$ compass watch
config.rb のある場所(今回は _sass)へ移動してから watch。–bare で _sass フォルダの中身が空っぽの状態で watch したらエラー出た。.scss があれば動いた。監視中は .scss ファイルを保存する度に自動変換して .css を生成してくれます。Coda 2 の端っこのタブでターミナルを開きっぱなしにしておけば邪魔にもならん。
Coda-Sass-Plug-in や coda-sass-plugin は不要
プラグインがやってくれていたことを Compass がやってくれるのでプラグインが不要に。しかも Compass の方が詳しく設定できる。やったね!
Coda 2 で Sass を使いたい人は、Compass も一緒にインストールしよう!!