CSS Nite LP32フォローアップ(3)黒野 明子さん(crema design)

2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、黒野 明子さん(crema design)の『Sassにもっと便利な機能をプラス! Compassを使ってラクしましょ?』セッションのスライドなどをシェアします。

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

大雪直後の土曜日、長時間セミナー、本当にお疲れ様でした。

私のセッションでは、Compassの使用感をイメージしていただけるデモをメインに行いました。アンケートを拝見したところ、比較的多くの方にお楽しみいただけたようで、ほっとしています。環境さえ構築できれば、黒い画面が苦手とお感じの方でも、Compassを使い始めるのは決して難しくありません。まずは、今回ご紹介した3つの機能から、試してみてはいかがでしょうか?

そのためにも、デモで作成したファイルを以下に置いておきました。screen.scss内に、解説コメントが入っていますので、コピペしてご利用ください。
https://www.dropbox.com/s/1qxpl8699ies02r/cssnite.zip

また、セッション内でご紹介したいくつかの記事URLを、下記に挙げておきます。

【Compass Helpers | Compass Documentation】
→Compass公式サイト内のHelpersのページです。非常に多くの機能が用意されていますので、いくつかピックアップして試してみてください。

【CompassでCSSスプライト(Retina対応) | clear sky source】
→今回のイベントで監修を担当した株式会社まぼろしの小林さんの記事です。デフォルトのCSS Sprite生成機能ではできないRetina対応について、言及されています。

# いただいた質問

ベンダープレフィクスはすべて書き出す(指定する)必要がないので、そのあたりのカスタマイズをするのが大変そうです。
今回登壇されたした、株式会社まぼろしの西畑さんのブログで、カスタマイズ方法が紹介されていますので、ご確認ください。
http://blog.webcreativepark.net/2013/09/02-225206.html
CSS Spriteの画像名は、必ず変わってしまうのですか?
デモでご紹介したような、ファイル名後半に自動で付与される文字列は、下記の方法で取り除くことができます。英語の記事ですが、Answersの一番上の答えで紹介されているコードを、config.rb内に記述してください。
【How to turn off COMPASS SASS cache busting?】

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日に開催します。