Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

実践Sass 前編

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

  • Soyez le premier à commenter

実践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. 後編につづく

×