下北沢OSSカフェにて、Sass+Compass勉強会を開催しました。
先日のエントリーでアナウンスさせていただきました、mah_labによるセミナー形式での、Sass+Compass勉強会を下北沢OSSカフェにて開催しました！
開催決定から当日の間に、このブログのテーマもSassで作ってみたり予習はして行ったわけですが、やはり現場での色々な話はとても勉強になりますね！
実際の導入についての具体的な方法は色々なブログで触れられていますので、今回は勉強会の内容を備考録として残しておこうと思います。
mah_labはスライドを再編集して公開すればいいと思う。
どうやらmah_labがスライドを公開してくれるようなので、こちらの記事もチェックしてみてください。
Sass&Compassの導入について
黒い画面使わないでも使えるツールがありますよ！
ということでご紹介したアプリはSCOUTでした。
このアプリは、Adobe Air上で動作するのでOSを選ばないのが良い。
しかも設定したディレクトリを勝手に監視して、CSSをその都度書き換えてくれる。
Compass環境下での「compass watch」と同じような動作ですね。
NAVERまとめの社内公式ツールくらいな感じらしいとかなんとか。
個人的には少し動作が重いかなあとは思いますが、難しい設定なしで使えるところが素晴らしいと思いました。
Mac環境での導入について
ここは急遽僕が発表することになったわけですが。
Coda2なら、RubyとCompassとSassを全部入れれば、内蔵コンソールで作業できるっていう実演を軽くさせて頂きました。
漢気あふれるセッティング
Xcodeを入れて、Hamlも動かせば良いじゃない！Haml良いよっていうプレゼンテーション。
ここはシステム寄りの人が盛り上がり、フロント寄りの人はついていけなかったかもしれない。。。
Sassってこんなに便利！
ズルいデザインの実例をもとに、便利な使い方を紹介。
良い感じの線、良い感じのシャドウ、良い感じのグラデーションなんかを定義しておけばいつでも呼び出せる！
良い感じのカラーセットをいくつも作っておけば、いつでも一行変えるだけですぐにサイト全体の色が変わる！
などなど、illustratorのアピアランスのように、作れば作っただけ財産が増えて、一定のクオリティを維持しながらも、コーディングが早くなる。
実際に使うにあたって
当日参加していただいた方より色々とアドバイスを頂きました。（お名前出して大丈夫でしたら是非出させていただきたい！）
まずは中規模サイトを3つくらい作ると良い
どこを変数にして、どこをミックスインにするのか、そこは感覚的なものを養うしかないので、目安としてはそのくらいのようです。
コツとしては、同じ表現を3回するならミックスイン。
上達すると@extend地獄が待っている！
継承すると凄くSassでは綺麗に書けるけど、CSSが残念なことになっている可能性があるので、うまく見極められるようにする。
ScssとSass、違いは記法だけじゃない
実は、Sassでしか使えない記述なんてのもあって、そのへんはうまく使い分けたりしたほうが良い。
インクルードするファイル同士の記法は統一させなくても良いので、アニメーション系だけsassで残りを全部scssなんてのもアリ。
当日を振り返って
急な呼びかけで、足元も悪いにもかかわらず、10人以上の方にお集まり頂き、本当にありがとうございました！
マークアップエンジニアさんをはじめ、色々な層の方にお集まり頂き、お話させていただいた方々とのお話では、色々な会社でのオペレーション、ワークフローなど参考になるお話も多く聞けたのが良かったです。
仕切りの甘さや、内容の偏り方など、反省点も多々ありますが、何かの機会に是非また何かしら開催できればと思います。
参加者の皆様、OSSカフェさん、本当にありがとうございました！！
