石井晃太郎ジャーナルコンテンツへスキップ石井晃太郎ジャーナルWEBデザインとマーケティングをテーマに語るビジネスノウハウブログ﻿メニューとウィジェット仕事のご依頼お問い合わせ著者:石井晃太郎1994年の早生まれ。慶應大学在学中からビジネスを始め、卒業後そのままフリーランスに。マーケティングやコピーライティングの知識を裏付けにしたWEBデザインやホームページ制作が主な仕事。某WEBサービスの運営やコンサルティングみたいなこともしてます。フルートやデッサンをやるぐらいには芸術分野、というかクリエイティブが好き。SASSconfig.rbに書いておくと役立つもの【SASS・Compass・Windows】こんにちは、石井です。TextでSASS・Compass環境のコンパイルが出来ない場合の対処法を書いたのですが、その中でconfig.rbをいじりました。今回はそのついでにconfig.rbに書いておくと良いかもしれない記述をいくつか紹介します。上記記事で書き加えたものです。SASS・Compass環境でコンパイルしようとするとエラーが発生することがあります。エラーには種類があるようですが、僕の直面したエラーは.sass-cacheフォルダがおかしな場所に作られていたことが原因でした。そこで以下の記述によって.sass-cacheフォルダが作られる場所を指定しています。(今回はconfig.rbと同じディレクトリに.sass-cacheフォルダが作られるようになっています。character」と書かれたエラーが発生することがあります。(コメント内にしか日本語が存在しない場合も発生します)以下の記述をconfig.rbに加えればこのエラーを回避できるのでWindowsユーザーにはお勧めです。'utf-8'ソースマップの作成Chromeのデベロッパーツールを使っていると、選択中のスタイルの場所がSASSファイルではなくコンパイル後のCSSファイルの場所で表示されます。SASS勢としては、一々CSSファイルとSASSファイルを照らし合わせて探すのは面倒くさいので、デベロッパーツールにSASSファイルの場所を表示させたいところです。そこで登場するのが「ソースマップ(.css.map)」。コンパイル前のSASSファイルの場所とコンパイル後のCSSファイルの場所を紐づけた地図のようなものです。このソースマップを対応するCSSファイルと同じディレクトリに置いておけば、ChromeのデベロッパーツールでSASSファイルの場所が表示されるようになります。Compassを使えばソースマップを簡単に作ることができるんです。config.rbに以下を記述しましょう。trueこうするだけで、CSSファイルのコンパイル時に、コンパイル後のCSSファイルのソースマップを自動で作成してくれます。ソースマップはコンパイル後のCSSファイルと同じディレクトリに作成されますが、ソースマップをそのディレクトリから移動させてしまうと参照先がずれたりしてしまうので注意しましょう。コンパイル後のCSSファイルを後から移動させる可能性がある場合は、あらかじめconfig.rbのcss_dirを指定して、ソースマップと共に移動先のフォルダに直接出力されるように設定しておいた方がよいと思います。(WordPressを使うときなど)また、Compassではconfig.rbにenvironmentを指定することで開発版(:developement)と納品版(:production)でコンパイルの内容を振り分けることが出来ますが、例えば納品版でソースマップを出力したくない時は、以下のように記述すれば大丈夫です。maps」にチェックを入れて下さい。3でSASS・Compass環境のコンパイルに失敗する問題こんにちは、石井です。Textを使ったコンパイル時にエラーが発生した時の対処法についてご紹介します。以前SASS・Compass環境を初めて導入したとき「一々コマンドでwatchしたりするの面倒やな...」と思い、簡単にコンパイルできる方法を探していました。koalaみたいなコンパイラも検討しましたが、コンパイラ開くのもコマンド打つのも大して変わらないという結論に至り、却下。Textと連携したコンパイル方法。ショートカットキーだけでコンパイルできるのは効率厨の僕にとって大変ありがたいです。エディタを変えようと思っていたのもグッドタイミングでした。rb_sysopenしかし、途中で問題が起こりました。それは諸々の設定を終え、試しにコンパイルしようとした時のこと。Text君がこんなメッセージを突き付けてきました。3/Packages/Compass/.sass-cache/[ここからファイルパスが続く]なんじゃそりゃと思って検索をかけてみるも、他のエラーに関することばかりで解決策が見つからず。仕方なく自分で調査したところ、原因を突き止めました。原因は「.sass-cache」フォルダ原因は「.sass-cache」フォルダにありました。Textフォルダの中のCompassフォルダの中の.sass-cacheフォルダの中のとあるファイルが見つからないよ!」ということらしい。「ん?.sass-cacheってそんなとこに作られんの?」ここが怪しいと睨み、さっそくconfig.rbをいじって.sass-cacheフォルダが作られる場所をプロジェクトフォルダのルートディレクトリに指定。コンパイルを試したら...やったぜcache_dirを設定しよう今回のエラーは.sass-cacheというキャッシュを溜めておくフォルダが変なところに作られ、それをコンパイル時に参照しようとした際に不都合が起こったのが原因のようです。config.rbから.sass-cacheが保存される場所を指定してあげればおk。場所はとりあえずプロジェクトフォルダのルートディレクトリにしときました。config.rbの好きなところに以下を記述します。'.sass-cache'同じようなエラーに困っている方、お試しあれ。.sass-cacheはどこに置くのが適切なのか?今回問題となった.sass-cacheフォルダですが、フォルダ構成によってはサーバーにアップロードする容量の増加と転送スピードの遅延を招きます。気になる人は以下のサイトを参考に、.sass-cacheフォルダが作られる場所を変更してみてもいいかもしれません。Textフォルダの中のCompassフォルダの中の...」みたいな変な場所に作らなければエラーも出ないでしょう。