前回、sassとcompassをアップデートしたところ、watchのエラーメッセージや、display-boxミックスインのエラーが。

とりあえず応急処置を施し、あとでじっくり解決しようと思ったところ、新たな不具合が。。。

compassの最新バージョンでは、flexboxを使う

compassの最新バージョン（v.1.0.1）では、display-boxミックスインが使えなくなったらしい。

と言うよりも、CSS3の使用が変更になり、display:boxでなくdisplay:flexを使うことになったようです。
（これ自体を知りませんでした。勉強不足でした。）

そのCSS3の変更に伴い、compassのバージョン0.13より、display-boxミックスインを含むboxモジュールが廃止になり、代わりにflexboxモジュールが導入されました。

CSS3のboxとflexは、仕組み自体も若干違っているので、他のプロパティも書き換えが必要になりますが、最新のcompassへの対応と、CSS3への正式対応という両方の観点からも、いち早い修正が必要のようです。

@charset “UTF-8″が消えた！

ここに来て、sass/compassを使用しているサイトに、わずかな不具合が。

原因を辿って行った結果、今までcompassでコンパイルしたcssの冒頭に挿入されていた文字コード宣言、

が、無くなっていました。
再コンパイルしても解消されず。

調べたところ、コンパイルしたCSSにASCII文字以外を含んでいる場合、@charsetが挿入されるらしいのですが、CSSには確かにASCII文字以外の平仮名等を含んでいるし、それなのに文字コード宣言が抜け落ちてしまっているので、サイトの表示にも不具合を起こしてしまっているようです。

結局、compassの最新バージョンに問題があるのではと推測し、最新バージョンをアンインストールしました。

まず、ターミナルで以下を入力。

すると、僕の環境では以下のようなメッセージが出ました。

どうやらバージョンを選んでアンインストールできるようなので、3を入力。

これでcompassの最新バージョンをアンインストールし、以前に使用していたバージョンに戻す事ができました。

CSSを再コンパイルしたところ、今度はきちんと文字コード宣言が挿入されました。

結局、compassは元のバージョンに…

元のバージョンに戻ってしまったcompass。

自分が前に使用していたのはv.0.12なので、古いboxモジュールは使用できますが、新しいflexboxモジュールは使えません。
当面はブラウザの対応に問題は生じないと思いますが、早い解決を望むところです。

また、compass w --pollとしないとwatchできない件については、バージョンを戻しても解決しませんでした。