Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

実践Sass 前編

30,125 views

Published on

HTML5 Conference 2012で使用したスライドです。

  • Be the first to comment

実践Sass 前編

  1. 1. 実践Sass 前編
  2. 2. 自己紹介NHN Japanという会社でMEをやっています @a_t
  3. 3. 共著しました電子書籍ですがブラウザで見れます今すぐアクセス!
  4. 4. 実践Sass• 前編• 導入、運用してわかった ポイントについて解説➡ Sassを使い始めた初級者向け
  5. 5. 実践Sass• 後編• 社内ライブラリを作って気づいた ポイントを解説➡ ライブラリを作ろうとしている 中級者向け
  6. 6. 前編で扱う内容• NHN JapanでのSass導入• 運用時のポイント• コーディングのポイント
  7. 7. NHN JapanでのSass導入
  8. 8. 導入した環境• MEの6-7割がMac• エディターもバラバラ• 基本的には全員CUIで導入※全員が黒い画面に使えるわけではない
  9. 9. コンパイル設定の共有CSSにはない「コンパイル」が必要Sassのコンパイルコマンドsass --watch [sass dir]:[css dir] --style [圧縮形式]
  10. 10. プロジェクトのwikiで共有➡ 忘れることもある
  11. 11. Compassで解決Sassのフレームワークライブラリの他に、Sassにはない拡張機能を利用できる
  12. 12. 設定ファイル:config.rb対象ディレクトリや圧縮形式を書いておくプロジェクトごとにルートディレクトリにコミット
  13. 13. Compassがあればcompass watch 全プロジェクトこれでOK!
  14. 14. 環境差異出力される@charsetが違う@charset "utf-8"、@charset "UTF-8"とかおかげでCSSがコンフリクト
  15. 15. 詳細な原因は不明Win/Macの違いrubyのバージョンの違い? あと勝ち解消でOK
  16. 16. CUIが苦手な人にはGUIツールもあるプロジェクトでGUIとCUIが混在しても問題ない
  17. 17. Scout• 無償• Compassも対応• サイトからDLできるver.ではconfig.rbが読めない• githubの最新版は、config.rbとSass3.2対応• Sass3.2の対応が遅かった (一昨日ようやくリリース)
  18. 18. Compass.app• $10(paypal支払い)• インストール不要 • dropboxに入れておけば、 環境をまたいで使える• Sass3.2対応も早かった
  19. 19. 運用時のポイント
  20. 20. 複数MEで同時作業したい• 上書き、 コンフリクト対策が必要
  21. 21. • 作業者毎にファイルを分割
  22. 22. • 分割ファイルは パーシャルで作成する• ファイル名の最初を _(アンダーバー)にする
  23. 23. パーシャル
  24. 24. • パーシャルファイルは インポートして使う• コンパイル時に CSSファイルにマージされる
  25. 25. • インポートしてコンパイル
  26. 26. • ファイルを分割すれば、 上書き/コンフリクトが 発生しない• 手動マージがいらないため コストもかからない
  27. 27. CSSを直接触りたい• 関係者全員への Sassインストールの徹底は 難しい
  28. 28. • CSSディレクトリに、 Sass管理外のCSSを作った
  29. 29. • Sassが使えない環境の人は このCSSを編集してもらう• 全員Sassを使える保証が ない場合 保険として有効
  30. 30. • 放置すると内容がカオスに• 定期的に内容を マージする必要あり
  31. 31. • 納品先がCSSを編集する場合• 修正や追加で戻ってきた時には Sassが使えない…• Sassを入れろ、とは言いえない ➡ Sass管理外のCSSで対応できる
  32. 32. 修正箇所の見つけ方• ブラウザから れるのは CSSまで• 問題箇所がどのSassファイ ルにあるかはわからない
  33. 33. line-commentssass --watch sass:css --style expanded --line-comments
  34. 34. こうなる:/* line 301, ../sass/core/_utility.scss */.fuga { clear: both;}/* line 60, ../sass/style.scss */.hoge { color: red;}:
  35. 35. • 作業が終わったら元の形式 で再コンパイルすればOK• 迷ったら--line-comments
  36. 36. :compressedの注意• 圧縮形式のひとつ• 改行やコメントを削除し て、容量を軽減してくれる
  37. 37. • コンパイル後、CSSは1行に• 複数人での作業時、 CSSがコンフリクト頻発
  38. 38. • diffをとっても 問題箇所がわからない
  39. 39. • 作業時は:expandedなど 他の圧縮形式で• 内容確定してから :compressed
  40. 40. コーディングのポイント
  41. 41. 色値の扱いのコツ• 変数に色値を入れると、 カラーネームに 自動変換される
  42. 42. 変換例//変換されない.hoge{ compiled color: #000000;} CSS//変換される .hoge{$color:#000000; color: #000000;}.piyo{ color: $color; .piyo {} color: black;}
  43. 43. • Sass3.2で変換対象の カラーネームが激増• カラーネームのほうが 色値より長い場合がある
  44. 44. 長くなる例#fafad2 → lightgoldenrodyellow#00fa9a → mediumspringgreen#66cdaa → mediumaquamarine#7b68ee → mediumslateblue#48d1cc → mediumturquoise#c71585 → mediumvioletred#ffebcd → blanchedalmond#6495ed → cornflowerblue#556b2f → darkolivegreen#778899 → lightslategrey#b0c4de → lightsteelblue#3cb371 → mediumseagreen
  45. 45. • 長くなるのはちょっと…• 色値とカラーネームが 混ざるのも気になる• 回避策は用意されていない➡ ので何とかしたい
  46. 46. 対応策 : 変換できない色値にする//カラーネームに存在しないので変換されない$color:#000001;.piyo{ color: $color;} CSS .piyo { compiled color:#000001;}
  47. 47. • 色が変わってしまう➡ 厳密な色が必要な場合は使えない
  48. 48. 対応策 : 文字列型で管理する//文字列型にしてから、クォートを外す$color:unquote(#000000);.piyo{ color: $color;} CSS .piyo { compiled color:#000000;}
  49. 49. 対応策 : 文字列型で管理する//これでも同じ$color:#{#000000};.piyo{ color: $color;} CSS .piyo { compiled color:#000000;}
  50. 50. • 色型が文字列型になる➡ 色をあつかう関数が使えなくなる
  51. 51. • 出力を:compressedにする • 色値/カラーネームのうち 最も短い方を 自動的に選択してくれる ➡ 両方の混在は回避できない
  52. 52. • Sassスクリプト自体を修正• カスタムSass関数で対応➡ 導入や作業者間の共有で難あり
  53. 53. • 状況によって 対応方法を考えましょう
  54. 54. コードの保守性を上げる• Mixin、@extend、変数、 Sassコメント ➡ そのコードが何を意図したものかを 明確にできる
  55. 55. こんなCSS.hoge { display: inline-block; *display: inline; *zoom: 1; width: 200px; height: 300px; overflow: hidden; padding: 0; border: none; background: url(hoge.png) no-repeat 0 0; text-align: left; text-indent: -9999px; *text-indent: 0; *line-height: 9999px; *word-wrap: normal; -webkit-box-shadow: 1px 0 1px #000; -moz-box-shadow: 1px 0 1px #000; box-shadow: 1px 0 1px #000; border: 1px solid #000;}
  56. 56. Sassではこう.hoge{ @include img-replacement (20px,30px,hoge.png); @include box-shadow (1px 0 1px #000); border:1px solid #000;}
  57. 57. • 何のためのコードか、 考える必要がない• 要素固有のルールセットが 見つけやすい➡ 他人が見てもわかりやすい
  58. 58. • 変数を使うと値そのものに 名前を付けられる• 何のための値か明示できる
  59. 59. 変数を使わないで書く.hoge{ background-color:#000; @include linear-gradient (top, #000, #fff);}
  60. 60. ちょっとだけ使いやすいソース.hoge{ $start:#000; $end :#fff; background-color:$start; @include linear-gradient (top,$start,$end);}
  61. 61. • 引数に直接値を書くと 値を使いまわしづらい• コピペもしづらい• 変数で取り回しがよくなる
  62. 62. • 演算を使う場合も 細かくコメントしておく• Sassコメントは CSSに出力されないため、 気軽に書ける
  63. 63. コンパイル後を意識する• Mixinは@includeされた 箇所で毎回展開される ➡ CSSが醜く肥大化する恐れ
  64. 64. • Mixin以外にも• 不要なネスト• @importの重複➡ 気がつくと肥大化してたりする
  65. 65. • CSSのベタ書きよりも 容量が増えたのでは意味が無い• コンパイル結果をイメージした コーディングが重要➡ たまにはコンパイルしたCSSを 見てみましょう
  66. 66. @extendを安全に使う• 任意のルールセットに、 グループセレクタとして 追加してくれる
  67. 67. @extendのサンプル.foo{" border:1px solid black;" color:red; compiled}:.hoge{" @extend .foo; CSS} .foo,.hoge,.fuga{.fuga{ " border:1px solid black;" @extend .foo; " color:red;}" margin:10px; :} .fuga{margin:10px;}
  68. 68. • コードのスリム化• グループセレクタの 管理が容易に
  69. 69. ただし
  70. 70. ルールを決めずに使うと…そのコード修正して大丈夫?どこかから@extendされてるかも…
  71. 71. 恐怖
  72. 72. • 運用でカバー• @extendしたいCSSは クラス名"extend-"で用意• その他のルールセットへの @extendは禁止
  73. 73. NHN Japanでの運用.extend-box{" @include linear-gradient(top, #000, #fff);" @include box-shadow(“0 0 1px #3cf”);" border:1px solid red;} CSS:.hoge{ .extend-box," @extend .extend-box; .hoge{" width:100px; " extend-boxのコード}} : .hoge{ compiled width:100px;}
  74. 74. 安心
  75. 75. • しかしこんな問題も• どこからも@extendしなくても、 .extend-のルールセットは 出力されてしまう• @extendすると、 必ず不要なセレクタが出力される
  76. 76. @extendしなくても出力される.extend-box{" border:1px solid red;" @include box-shadow(“0 0 1px #3cf”);" @include linear-gradient(top, #000, #fff);}: CSS.hoge{" width:100px; .extend-box{} " extend-boxのコード} : .hoge{ compiled width:100px;}
  77. 77. 不要なセレクタが出力される.extend-box{" border:1px solid red;" @include box-shadow(“0 0 1px #3cf”);" @include linear-gradient(top, #000, #fff);} CSS:.hoge{ .extend-box," @extend . extend-box; .hoge{" width:100px; " extend-boxのコード}} : .hoge{ compiled width:100px;}
  78. 78. • Placeholder Selector (Sass3.2から登場)• 無駄なセレクタを 抑制できるようになった
  79. 79. Placeholder Selectorのサンプル%box{" border:1px solid red;" @include box-shadow(“0 0 1px #3cf”);" @include linear-gradient(top, #000, #fff);}: CSS.hoge{ .hoge{" @extend %box; " %boxのコード}" width:100px;} : .hoge{ compiled width:100px;}
  80. 80. • @extend、 正しく使えば怖くない
  81. 81. 後編につづく

×