Sublime text2でCompass watchが動かない時の解決方法

最近Sublime text2のCompass watchが動作していないことに気づいちゃって、なんじゃこりゃ?となったので解決方法を自分用のメモ代わりに記載しときます。(すぐ忘れちゃうんで)

あまりしたくはなかったのですがCompass watchが効かなかったので記述を変更してはcommnd +Bでビルドとしてたけど、いい加減うっとおしくなったので、Compass watchを出来る様に調べた結果
packagesフォルダ→compassフォルダの中の
sc1

build.shファイルの中の記述を変更

#!/bin/sh
IFS=`printf '\n+'`; IFS=${IFS%+}
FILE_PATH=$1;
PROJECT_PATH=${2-/};
COMPASS=`which compass`;

if [ -z "$COMPASS" ]; then
  echo "[ERROR] compass not found. Make sure it exists in your PATH.";
  exit;
fi

if [ `find "$FILE_PATH" -maxdepth 1 -name config.rb` ]; then
  $COMPASS compile "$FILE_PATH" --boring;
  FOUND=1;
fi;

while [ "$FILE_PATH" != "$PROJECT_PATH" ];
  do FILE_PATH=`dirname "$FILE_PATH"`;

  if [ `find "$FILE_PATH" -maxdepth 1 -name config.rb` ]; then
    $COMPASS compile "$FILE_PATH" --boring;
    FOUND=1;
    break;
  fi;
done

if [ -z "$FOUND" ]; then
  echo "[ERROR] Build did not run because config.rb cannot be found.";
fi

13行目と21行目に同じ記述があるのですが、21行目の

$COMPASS compile "$FILE_PATH" --boring;

$COMPASS watch "$FILE_PATH" --boring;

に変更すると以前どおりCompass watchが効く様になります。
問題なのはcompassのpackageがアップデートなどで記述に変更があった場合に以前の状態に戻すことがあるかもしれないので一応メモ書きしておきます。
そもそもなぜ出来ていた事が出来なくなっているのかを考えるとcompass watchを停止しても切れていなくてrubyがバックグラウンドで動いてCPUに負荷がかかってたとかいう記事をみたので意図的に変更したのかもしれません。
でも、compass watchがSublime textの中で出来るのでちょっと使用していこうかなと思います。
ターミナルでcompass watchでもよいのかな?

CSS Sublime Text2とsass,scss,compassという選択肢

いやぁどうもです。CSS覚えるのは大変ですねぇ。codaのCSSエディタにかなり助けられながらCSSのプロパティを覚えていきました。やはりコピペとかでCSSを記述する方も多いのかなぁとも思います。

coda1,cssエディタ
写真はcodaのCSSエディタです。
coda2からはないですけども、、覚えてくると補完機能で案外いけますよね。
CSSのプロパティが不安な方はこのようなエディタをご使用されるとよいのではないでしょうか。(CSSプロパティを覚えてしまうまでのツールとして。)

問題はCSS3

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #446c92), color-stop(100%, #34526f));
  background-image: -webkit-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -moz-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -o-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: linear-gradient(#446c92 0%, #34526f 100%);
  -webkit-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  -moz-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8); }

例えば上のCSS(はしょってますが)colorの部分等を変更します?いやぁこれは、、これが1カ所であればまだなんとか、これがたくさんある場合は、、、
以前Sassをつかって見た時、ネストの印象が強く、Lessを使ってみた時、サイト毎の環境構築が大変そうな印象を持っていました。でも目的は上のベンダーフィックスの嵐をどう簡略化するのかでした。
compass公式サイト http://compass-style.org
google先生に訪ねてみる事、沢山のナイスで素敵な記事がいっぱいある。

上のCSSですが実際のscssファイルのセレクタには下の2行が入ってます。

@include gradient-top-lighten($color);
@include box-shadow(0px -2px 2px rgba(181,181,181,0.8));

$colorはなんだろう?
別のscssファイルに$color:#34526f; の記述でカラーをいつでも好きな色に変更することができます。
疑問なのは今使っているCSSの記述をscssの記述にすべてを変更しないといけないのか?等だと思いますがコンパイルする前のstyle.scssに編集中のstyle.cssの記述をそっくりコピーしてコンパイルしても中身は同じ記述のstyle.cssが吐き出されるのでscss,compassの機能を徐々に追加していっても何も問題ないです。
やれることが多い分、中々一気にってわけもいかないと思いますので。

続きを読む “CSS Sublime Text2とsass,scss,compassという選択肢”