CSS Nite LP26「CSS Preprocessor Shootout」フォローアップ(2)『パフォーマンスから考えるSass/Compassの導入・運用』石本 光司さん

130112_0208.jpg

2013年1月12日(土) 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、石本 光司さん(サイバーエージェント) の『パフォーマンスから考えるSass/Compassの導入・運用』のスライドなどを公開します。

メッセージ、補足

Sassについてのセッション担当の石本です。

Sass+Compassは非常に高機能なCSSプリプロセッサーですが、だからといってその機能すべて使用・理解しようとすると大変なので、あくまで問題を解決するツールとして考え、必要になったら(なにか問題に直面したら)使用・勉強するといったスタンスで向き合っていけば良いと思います。事実、私も使ってない機能はいっぱいあります。

また、今回のイベントでSassが主流かのような印象を持たれた方も多いと思います。だからといってSassさえ出来てればよいのかというとそうでもないように思えます。時が立てば、またLessが盛り返してくるかもしれないし、全く別のあたらしいCSSに関する技術が出てくるかもしれません。そういった時に、食わず嫌いせずにどんどんそれらを取り込む姿勢(それが黒い画面を使うものだとしても)が今後重要だと考えます。

変化に対応できる柔軟な人材が求めらているなと感じたイベントでした。講演者としても大変勉強になった一日でした。ありがとうございました。

以下、フォローです。

Compassについて

スライドで紹介した、CSS Spriteのmixinの詳細な解説です。

パフォーマンスからみるSass/Compass 第2回:CompassによるCSS Sprite | MOL

私が作成したmixinはRetina対応した独自のものなので、普通にCSS Spriteする分にはもっと簡単に使えます。

CompassでCSSスプライト[to-R]

スプライト画像のレイアウトに関しては$icon-layoutで変更可能です。

Sprite layouts | Compass Documentation

StyleDoccoについて

StyleDoccoの詳しい使い方に関しては下記を参考にしてください。

CSSプリプロセッサでスタイルガイド - inkdesign

「styleDocco」の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog

StyleDocco自体のスタイルは変更できるのか?

個人的には要望は出しているのですが、今のところできないようです。

Ruby製の別のスタイルガイドKSSではできますが、StyleDoccoよりも導入の敷居は高いです。

スタイルガイドジェネレータの KSS が良さそう - text.funenPlaCanen.com

Shift10:Webデザイン行く年来る年(CSS Nite LP49)

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

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

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