config.rbに書いておくと役立つもの【SASS・Compass・Windows】

こんにちは、石井です。

この前Sublime TextでSASS・Compass環境のコンパイルが出来ない場合の対処法を書いたのですが、その中でconfig.rbをいじりました。

今回はそのついでにconfig.rbに書いておくと良いかもしれない記述をいくつか紹介します。

cache_dirの指定

上記記事で書き加えたものです。

SASS・Compass環境でコンパイルしようとするとエラーが発生することがあります。

エラーには種類があるようですが、僕の直面したエラーは.sass-cacheフォルダがおかしな場所に作られていたことが原因でした。

そこで以下の記述によって.sass-cacheフォルダが作られる場所を指定しています。(今回はconfig.rbと同じディレクトリに.sass-cacheフォルダが作られるようになっています。)

cache_dir = ".sass-cache"

日本語使用時のコンパイルエラーを防ぐ

Windows環境でCompassを使っている時、scssファイル内に日本語があると、コンパイル時に「Invalid Windows-31J character」と書かれたエラーが発生することがあります。(コメント内にしか日本語が存在しない場合も発生します)

以下の記述をconfig.rbに加えればこのエラーを回避できるのでWindowsユーザーにはお勧めです。

Encoding.default_external = 'utf-8'

ソースマップの作成

Chromeのデベロッパーツールを使っていると、選択中のスタイルの場所がSASSファイルではなくコンパイル後のCSSファイルの場所で表示されます。

SASS勢としては、一々CSSファイルとSASSファイルを照らし合わせて探すのは面倒くさいので、デベロッパーツールにSASSファイルの場所を表示させたいところです。

そこで登場するのが「ソースマップ(.css.map)」。コンパイル前のSASSファイルの場所とコンパイル後のCSSファイルの場所を紐づけた地図のようなものです。

このソースマップを対応するCSSファイルと同じディレクトリに置いておけば、ChromeのデベロッパーツールでSASSファイルの場所が表示されるようになります。

で、Compassを使えばソースマップを簡単に作ることができるんです。

config.rbに以下を記述しましょう。

sourcemap = true

こうするだけで、CSSファイルのコンパイル時に、コンパイル後のCSSファイルのソースマップを自動で作成してくれます。

ソースマップはコンパイル後のCSSファイルと同じディレクトリに作成されますが、ソースマップをそのディレクトリから移動させてしまうと参照先がずれたりしてしまうので注意しましょう。

コンパイル後のCSSファイルを後から移動させる可能性がある場合は、あらかじめconfig.rbのcss_dirを指定して、ソースマップと共に移動先のフォルダに直接出力されるように設定しておいた方がよいと思います。(WordPressを使うときなど)

また、Compassではconfig.rbにenvironmentを指定することで開発版(:developement)と納品版(:production)でコンパイルの内容を振り分けることが出来ますが、例えば納品版でソースマップを出力したくない時は、以下のように記述すれば大丈夫です。

sourcemap = (environment == :production) ? false : true

もしsourcemapをtrueにしてもChromeのデベロッパーツールでSASSファイルの場所が表示されない場合は、F12を押してデベロッパーツールを開き、デベロッパーツール右上の×ボタンの隣にある3つの点(Customize and control DevTools)を開き、Setting->Preferences->Sources内の「Enable CSS source maps」にチェックを入れて下さい。

Sublime Text 3でSASS・Compass環境のコンパイルに失敗する問題

こんにちは、石井です。

今回はSASS・Compass環境でSublime Textを使ったコンパイル時にエラーが発生した時の対処法についてご紹介します。

ことの経緯

以前SASS・Compass環境を初めて導入したとき「一々コマンドでwatchしたりするの面倒やな…」と思い、簡単にコンパイルできる方法を探していました。

koalaみたいなコンパイラも検討しましたが、コンパイラ開くのもコマンド打つのも大して変わらないという結論に至り、却下。

結局行きついた先は、みんな大好きSublime Textと連携したコンパイル方法。

ショートカットキーだけでコンパイルできるのは効率厨の僕にとって大変ありがたいです。

丁度エディタを変えようと思っていたのもグッドタイミングでした。

No such file or directory @ rb_sysopen

しかし、途中で問題が起こりました。

それは諸々の設定を終え、試しにコンパイルしようとした時のこと。

Sublime Text君がこんなメッセージを突き付けてきました。

No such file or directory @ rb_sysopen - C:/Users/[USER名]/AppData/Roaming/Sublime Text 3/Packages/Compass/.sass-cache/[ここからファイルパスが続く]

なんじゃそりゃと思って検索をかけてみるも、他のエラーに関することばかりで解決策が見つからず。

仕方なく自分で調査したところ、原因を突き止めました。

原因は「.sass-cache」フォルダ

原因は「.sass-cache」フォルダにありました。

エラー内容を解読すると、どうやら

「Sublime Textフォルダの中のCompassフォルダの中の.sass-cacheフォルダの中のとあるファイルが見つからないよ!」

ということらしい。

「ん?.sass-cacheってそんなとこに作られんの?」

ここが怪しいと睨み、さっそくconfig.rbをいじって.sass-cacheフォルダが作られる場所をプロジェクトフォルダのルートディレクトリに指定。

そしてコンパイルを試したら…

やったぜ

cache_dirを設定しよう

今回のエラーは.sass-cacheというキャッシュを溜めておくフォルダが変なところに作られ、それをコンパイル時に参照しようとした際に不都合が起こったのが原因のようです。

だから、config.rbから.sass-cacheが保存される場所を指定してあげればおk。

場所はとりあえずプロジェクトフォルダのルートディレクトリにしときました。

config.rbの好きなところに以下を記述します。

cache_dir = '.sass-cache'

同じようなエラーに困っている方、お試しあれ。

.sass-cacheはどこに置くのが適切なのか?

今回問題となった.sass-cacheフォルダですが、フォルダ構成によってはサーバーにアップロードする容量の増加と転送スピードの遅延を招きます。

気になる人は以下のサイトを参考に、.sass-cacheフォルダが作られる場所を変更してみてもいいかもしれません。

Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法

多分「Sublime Textフォルダの中のCompassフォルダの中の…」みたいな変な場所に作らなければエラーも出ないでしょう。

それでは、ありがとうございました!