【レポート】CSS Nite LP, Disk 32「Sass」 #cssnite_lp32

2014年2月15日に開催された「CSS Nite LP, Disk 32 Sass」に参加してきました。当日未明まで降った大雪の残る中、「Sass」だけで8セッション・計6時間と、外に残る雪も溶かしちゃうくらい内容の濃いセミナーとなりました。

Why Sass?(谷 拓樹さん)
  • Sassとは?
    1. CSSにプログラムの性質を与える「CSSメタ言語」
    2. 変数、関数、演算、条件式など
    3. CSSをより強力にするための言語
    4. Rubyで実装されているスクリプト言語
  • Sassはどうやって使うのか?
    1. .cssではなく.sass or .scssで保存して使う
    2. コンパイルをする必要がある(.sass or .scss→変換→.css)
  • (同様のCSSメタ言語がある中で)なぜSassを選ぶのか?
    1. 日本語のブログ記事・関連書籍が多い
    2. 開発が安定している
    3. compassというフレームワークを使える
  • Sassはただのツールである。CSSをちゃんと書く・・・がベース
CSSがもっとラクに書ける!これから始めるSassの書き方(柴田 大樹さん)
  • なぜ?→ラクにCSSが書けるから
  • Sassを変換しCSSに出力する(PSD→JPGに書き出すと近いイメージ)
  • Sassの特徴
    1. 共通するセレクタをまとめて記述
    2. 変数
    3. プロパティと値の組み合わせをまとめたい→「ミックスイン」@mixin
    4. セレクタのグループ→「エクステンド」@extend
    5. 計算が出来る(四則演算)
Sassにもっと便利な機能をプラス!Compassを使ってラクしましょ♡(黒野 明子さん)
  • compassってなに?
    1. Sassの機能を拡張するプログラム
    2. 便利なmixin集(呼び出すだけで利用可能)
    3. 使いまわし出来る便利機能満載
  • compassの便利機能ベスト3
    1. ベンダープレフィックス
    2. CSS sprite
    3. data URI scheme
Sass/Compassの導入と環境構築(森田 壮さん)
  • Rubyをインストール
  • Sass/Compassのインストールを黒い画面で(「コマンドプロンプト/ Win」「ターミナル/ Mac」)
  • Sass/Compassのコンパイルも黒い画面で
  • GUIツールでコンパイル
    1. Prepros
    2. Koala」日本語対応
    3. Codekit」Mac専用で有料$28・・でも高機能
  • 黒い画面でも、GUIでも、どちらでも。あなたのラクな方で。
コピペで使える!変数とmixin!(山田 敬美さん、坂巻 翔大郎さん)
  • 自分でmixinをつくるのは敷居が高い→活用できるものはコピペで使おう
  • 変数の使いどころ
    1. 徐々に変更になりそうなもの
    2. 値が長くなるもの
    3. カラーコード、フォントサイズ、幅や高さ、画像パス・data URIなど
  • mixinの使いどころ
    1. 同じような記述を繰り返す
    2. 微妙な違いを引数で調整
    3. あちこちで使われるコードを1ヶ所で一元管理
    4. 画像置換やclearfix、メディアクエリなど
Sass/Compass よくあるトラブルと解決方法・回避方法(木村 哲朗さん、西畑 一馬さん)
  • 受託で使ってもいいの?→クライアントがSassを使えない場合の対応は考慮しつつ、使った方が効率がいい
  • SCSSファイルって納品するの?→原則、納品する
  • ネストが深すぎると・・・→コードが冗長化する。原則ネストは3階層に留める
  • extendの多用は(共同で作業する場合)煩雑になる→mixinにする、汎用的なクラスをふる
  • ネストやextendを使うとセレクター増えがち(IE9以下では4095個までしかセレクターを認識しない)→分割する。そもそも設計に問題あり
  • 画像を使いすぎるとスプライト画像mpサイズが巨大化する→一枚に集めすぎない。CSS3やアイコンのwebフォント化で対応
Sassの日常の運用(富田 梓)
  • (Sassを使うとき)小規模のプロジェクトでは冗長
  • (全社導入するには、メンバーに)あらたな学習が必要
  • 作業効率は向上
  • プロジェクトへの人員の途中参加、交代も用意
HTMLテンプレートの設計(高津戸 壮さん)
  • CSSをうまく書くのは難しい→Sassだともっと
  • 他の人はあなたの書いたCSSが理解できない→Sassだともっと
  • 「どう設計するか」をちゃんと考えてSassを活用する
  1. OOCSS
    • レゴみたいに組み合わせてページをつくろう
    • 「モジュール」ひとつひとつの部品に名前を付ける
    • 「スキン」を適用するという考え方
  2. BEM
    • 設計や実装の方法論のひとつ。一般的にはクラス名の命名規則
    • 設計思想、ルールの統一が出来る
    • クラス名で構造が把握できる
  3. SMACSS
    • スケールできてモジュールなCSS
    • かっちりした決まりというわけではない
    • aseをつくり、Layoutをつくり、Moduleを積んでいく
  • 設計思想を統一するメリット
    1. 高速な開発が可能
    2. プロジェクトの寿命を延ばせる
    3. チームによる実装を可能にする
    4. コードの再利用を可能にする
  • 基本的な設計概念を自分の中で固めた上で、Sassを利用する

今までSassは、会社でも個人でも使ってきませんでした。会社のMacはインストール禁止ソフトウェアなどの制限もあるので、どこまで実現できるか怪しい部分があるのが残念なのですが・・・まずは個人案件で触ってみようと思います。

みなさま長丁場おつかれさまでした!

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー