CSS Nite LP32フォローアップ（4）森田 壮さん（Sou-Lab）

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、森田 壮さん（Sou-Lab）の『Sass/Compassの導入と環境構築』セッションのスライドなどをシェアします。

• 音声

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

本当にお足元の悪い中、お越しいただきましてありがとうございました。
Sass/Compassを使う手順として環境構築の話をさせていただきましたが、今回のセッションが素敵なSassライフのきっかけとなれば幸いです。

ざっくりコマンドのおさらいです。

・インストール
gem install sass
gem install compass
（Macは先頭にsudoを付けて）

・コンパイル
■Sass
sass --watch . -t expanded
配布のバッチファイル／シェルスクリプト
■Compass
config.rbを用意してcompass w

・配布ファイルファイルについて
http://sou-lab.com/lp32/

翻訳したconfig.rbと、バッチファイル（Win用）／シェルスクリプト（Mac用）が入っています。
デモではMacのみで端折ってしまいましたが、Windowsもダブルクリックでウォッチ（変更の監視）ができます。
※ファイルまでのパスに日本語（マルチバイトパス）や記号があるとエラーになるので気を付けてください。

GUIコンパイラの操作について簡単な説明だけでしたが、実際に簡単にコンパイルすることができます。
PreprosとKoalaは無料で使えますので試してみてください。

インストールやコンパイル作業などでハマったら、お力になれるかもしれないのでお気軽に質問してください。
https://twitter.com/sou_lab

補足

ウォッチの停止の方法を言い忘れていたのですが、ウォッチをしているとコマンドラインに
「>>> Sass is watching for changes. Press Ctrl-C to stop.」と表示され、Ctrl＋Cで停止することができます。Win/Mac共通です。画面を閉じても停止できます。

アウトプットスタイルについて

スタイルのcompressedは通常コメントも消されてしまいますが、コメントを残したい場合は /*! コメント */ と先頭に「!」を入れてください。

いただいたご質問

Q.config.rbのimages_dir="images" これはそのまま使ったら新規にフォルダ生成してくれますか？

A. images_dirで指定したフォルダの中の画像からスプライト画像を生成したり、画像サイズを取得する関数を使えたりします。
なので、はじめにimages_dirで指定したフォルダを作成し、その中に画像を入れておく必要があります。
ちなみにcss_dirで指定したフォルダが無い場合はフォルダも生成され、その中にCSSファイルを書き出します。
こちらはSassも同様で、出力先で指定したフォルダがない場合は生成してくれます。

Q.sass --watchとcompass wは両方やらないといけない？compass wを実行すればsass --watchは不要？

sass --watch hogeはSassを使うコマンドで、compass wはCompassに使うコマンドです。
どちらか一方をコマンド入力すればオッケーです。
どちらか迷ったらCompassはSassの機能を兼ねていますので、配布したconfig.rbを使っていただいてcompass wを実行してもらえればと思います。

Q.GUIコンパイラが知らないの沢山あったので知りたい

スライドでアイコン一覧で並べたコンパイラですが、並び順で
MIXTURE・Compass.app・Prepros・LiveReload
CodeKit・Koala・Hammer・Scout
です。色々おもしろい機能をもったGUIツールもあるのですが、通常のSass/Compassの使用には紹介した3つがオススメです。Scoutは一年以上更新が無いのでオススメしません。

アンケートにSassの教科書の感想を書いていただけたり本当に嬉しかったです。