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

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

Sass/Compassの導入と環境構築 from Sou Lab

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

本当にお足元の悪い中、お越しいただきましてありがとうございました。
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の教科書の感想を書いていただけたり本当に嬉しかったです。

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」

3月に都内で好評のうちに終了したCSS Nite LP51「Reboot Dreamweaver」の大阪版を5月13日に開催します。