CSS Nite LP32フォローアップ（6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）の『Sass/Compass よくあるトラブルと 解決方法・回避方法』セッションのスライドなどをシェアします。

• 音声

スライドはSlideShareにて公開されています。

メッセージ、補足（イベント終了直後にいただいたものを再掲）

みなさま、足下の悪い中お越しいただきまして誠にありがとうございます。

今回私たちは、実際の制作業務ではまりがちな落とし穴や、細かな要望に応えるためのTipsについてお話ししました。クライアントを含めて様々な職能の方に共有いただけるような内容を意識したのですがいかがでしたでしょうか。セッションで何ページか飛ばして進めた今回のスライドは、資料として今後のお仕事にご活用いただければ幸いです。

また、SassやCompassを足がかりとした「次」へのステップとして簡単にGruntの紹介もしました。デモでご覧いただいたとおり、様々なタスクを柔軟に組み合わせることができるので大変に便利なツールです。SassやCompassにある程度慣れてきたら、是非チャレンジしてみてください。Gruntについては、西畑のブログに入門記事が掲載されていますので是非ご覧ください。

http://blog.webcreativepark.net/2013/08/28-010250.html

# いただいた質問

Q. コンパイルするとカラーコードが色名になってしまいます。回避することはできないのでしょうか。

A.
Sassでは、変数にカラーコードを代入してそれを呼び出すと、コンパイル時に色名に変換（例：#f00 → red）してしまいます。手っ取り早い方法としては、変数に代入する際に文字列で指定することで回避が可能です。またそのようにして「色」を「文字列」として変数に代入した際は、呼び出す際にunquote関数を用います。以下に、変数の定義方法と呼び出し方の例を示します。

```
$keyColor: '#f00'; //カラーコードをクオーテーションで囲うことで、「色」ではなく「文字列」として代入する

.foo {
color: unquote($keyColor); //呼び出す際はunquote関数を使って呼び出す
}
```
ただしこの方法では、lightenやdarkenなどの色演算機能を使うことができなくなりますのでご注意ください。

Compassを使う場合はもう少し高度な回避方法があります。それはSass本来の機能を独自に上書きする方法です。詳しくは以下のURLに書かれています。少し難しい内容ではありますが、ご興味のある方はご覧ください。

http://blog.webcreativepark.net/2014/02/16-185913.html

Q. GruntではCompassみたいに保存時の即時反映があるのか気になりました。

A.
ファイルの更新をウォッチ（監視）するプラグインを使用すれば可能です。ウォッチプラグインでは「scssファイルが更新されたらsassのコンパイルする」などのタスクを定義することが可能です。セッションでは飛ばしてしまいましたが、資料には代表的なウォッチプラグインを掲載していますのでご確認ください。また、上記に挙げた西畑のブログではGruntによるウォッチの実現方法について具体的に解説していますので、是非ご覧いただければと存じます。

最後に宣伝

弊社で監修した『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』という書籍が発売中です。Sass/CompassやGruntなど、昨今の現場で必要とされているWeb制作の技術についてまとめた一冊となっておりますので、ご興味のある方は是非お手にとってご覧ください。

また、この書籍の発売を記念したイベントを3/8（土）に開催します。本書に書かれている内容について著者自らが掘り下げてお話しするイベントとなっておりますので、お時間のある方は是非ご参加ください。

以上、ありがとうございました！