みなさんこんにちは。当ブログの編集長です。
昨日、今日は春の嵐になりそうな雰囲気ですが、みなさんお変わりないでしょうか。
そろそろ花粉が気になる今日はホワイトデーです。ごげんよう。
思い起こせば、あれは先月。関東近郊はとてつもない大雪に見舞われ、一面の雪景色！！！数ヶ月前の当ブログで「東京の雪景色を期待する気持もありますが...」 という記事がありましたが、記事を書いた菊池は当日の大雪に大はしゃぎでした。「自宅の駐車場で雪が膝まで積もってたよ！！！」と嬉しそうで、さすが北国の男。
そんな大雪の翌日に開催された「CSS Nite LP32」に参加してきた、弊社デザイナーの"なにわっこ"さんから当日のレポートが届いていますので紹介します。先月のうちにレポート貰ってたんですが、僕の都合で遅くなっちゃいましたごめんなさい！
吹雪の次の日にセミナーに参加してきたので、
まとめ
1)基調講演 Why Sass? （谷 拓樹さん）
なぜにSassを使うかという内容で
stylusとかlessとかあるけど、Sassは開発コミュニティも安定しているし、
CSSと変わらない書き方ができて
compassフレームワークが使えて便利だって話でした。
デザイナーにとっては黒い画面がとっつきにくいかもしれないが、
アプリ使えば問題ないよって話もありました。
でも、ネスト（入れ子）しすぎて、コンパイル出力される際のCSSえらいことなるから
気をつけましょう！とのことです。
2)CSSがもっとラクにかける！これから始めるSassの書き方（柴田 大樹さん）
Sassの基本的な、便利な書き方を
3つに絞って教えてくれました。
①入力の手間をはぶく
・共通セレクタの入力は入れ子にできる
#main {
h1 {
color:#000;
}
}
↓出力後
#main h1 {
color:#000;
}
・同じ値は変数を使う
一箇所の修正で済む
$key-color:#000;
・同じプロパティと値のセットをまとめるには@mixin
定義時→@mixin 名前{スタイル}
使用時→@include:名前; mixinは変数名も使えます。
定義時→@mixin 名前($変数名){スタイル}
使用時→@include:名前(値や変数);
・【,】でまとめるセレクタコードは把握しやすく、ミスの原因になるので @extedを使う
.button { スタイル }
.button-enter { @exted .button; }
↓出力後
.button, .button-enter{
スタイル
}
②CSSファイルをまとめる
importリクエストをなくし、表示速度をあげる
importされるcssファイル名の先頭に「_」（アンダーバー）をいれる。
importファイル内に
@import"reset","layout","basic"
③Sass内で計算できる
・計算式をいれて、指定できる
width:960px - 15 * 2 ) / 3;・色の微調整がSassで可能
background:darken(#000,20%);他にもlightn saturate desaturate とか使って色調整できる。
■これは便利！Sass meister を使ってSassのお試しができるそうです。
http://sassmeister.com/
3)Sassにもっと便利な機能をプラス！Compassを使ってラクしましょ♡ （黒野 明子さん）
Compassを使うとSassがもっと便利になるそうで、
フォルダ内の画像をスプライト化してくれて、
positionコードも書き出してくれる便利機能の紹介 データURIスキームのコード書き出しなど
（リクエスト数を減らすことができるが、複雑な画像には不向き）
実践を交えて紹介してくれました。
4)Sass/Compassの導入と構築環境（森田 壮さん）
Sassの教科書の著者、森田さんの講義
本で紹介されている、話をwindows、mac共に丁寧に説明してくれたので、
私にとっては復習になりました。
ここで、私がヘタに説明するより、本読んだほうがよいです。
講義もそうでしたが、すごく丁寧に書かれていて、わかりやすいです。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 [単行本（ソフトカバー）]
http://www.amazon.co.jp/dp/4844334662
ちなみに森田さんはCodekit（mac専用ツール）とGRUNTを使っているそうです。
5)コピペで使える！変数とMixin！（山田 敬美さん・坂巻 翔太郎さん）
compassで使える変数とmixinコードを
色っぽい先生と学ランを着た方が紹介してくれました。
https://github.com/geckotang/cssnite-lp32
6)Sass/Compass よくあるトラブルと解決方法・回避方法（木村 哲朗さん・西畑 一馬さん）
まぼろしのお2人の講義は
受託でSass使う際の注意点や御法度の紹介でした。
Sass/Compassの御法度
・ネストの多様に注意
3階層までにする
・extendの多様
クラスやmixinを使うほうがよい、
後々嵌るから
・セレクタが増えないように設計する
IE9以下は4,095個までしかセレクターを認識しない為
・mixin定義はコメントを残すなりして、他の人が使えるように
・スプライト画像の肥大化に注意
iphoneは500万画素なのでまれに表示できなくなる。
7)Sassの日常の運用（富田 梓さん）
Sassを使う時の問題点
・CSSからSassの間違いを探しにくい
・ルール不足
・mixin集がプロジェクトごとに変更される
・extendの管理
複数のプロジェクトをまたいで、Sassのガイドラインを作っておくと、
プロジェクトに関わるメンバーが変わったときでも
スムーズに対応ができるので作業効率が上がる。
プロジェクトチーム内で導入する際は共通ファイルとライブラリなどの更新管理が必要。
8)HTMLテンプレートの設計（高津戸 壮さん）
設計を考えてSassを使う
Sassを導入するにはまずCSSをだれでも理解できるように書く事が重要
OOCSSやBEM、SMACSSなどの
オブジェクト指向CSSといわれ、
上書き合戦やコピーをさけ、important上書きできなくさせたり、容量増加したりすることを避ける。
SassはCSSではできない複雑な表示の利用ができるようにしている。
なにわっこの感想とまとめ
一部のプロジェクトでは使い始めているので、
プロジェクト間で共通で使えるように利用すると
作業効率もあがるので、
次回関わるプロジェクトではその辺も考えながら利用していきたいと思っています。
とはいえ、ここ2,3ヶ月はコーディングのお仕事していないな…
※クリエイティブディレクターH氏作のなにわっこ
