Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to 実践Sass 前編
Similar to 実践Sass 前編 (20)
実践Sass 前編
- 1. 実践Sass 前編
- 2. 自己紹介 NHN Japanという会社で MEをやっています @a_t
- 4. 実践Sass • 前編 • 導入、運用してわかった ポイントについて解説 ➡ Sassを使い始めた初級者向け
- 5. 実践Sass • 後編 • 社内ライブラリを作って気づいた ポイントを解説 ➡ ライブラリを作ろうとしている 中級者向け
- 6. 前編で扱う内容 • NHN JapanでのSass導入 • 運用時のポイント • コーディングのポイント
- 8. 導入した環境 • MEの6-7割がMac • エディターもバラバラ • 基本的には全員CUIで導入 ※全員が黒い画面に使えるわけではない
- 9. コンパイル設定の共有 CSSにはない「コンパイル」が必要 Sassのコンパイルコマンド sass --watch [sass dir]:[css dir] --style [圧縮形式]
- 15. 詳細な原因は不明 Win/Macの違い rubyのバージョンの違い? あと勝ち解消でOK
- 17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
- 18. Compass.app • $10（paypal支払い） • インストール不要 • dropboxに入れておけば、 環境をまたいで使える • Sass3.2対応も早かった
- 19. 運用時のポイント
- 21. • 作業者毎にファイルを分割
- 22. • 分割ファイルは パーシャルで作成する • ファイル名の最初を _（アンダーバー）にする
- 23. パーシャル
- 24. • パーシャルファイルは インポートして使う • コンパイル時に CSSファイルにマージされる
- 25. • インポートしてコンパイル
- 26. • ファイルを分割すれば、 上書き/コンフリクトが 発生しない • 手動マージがいらないため コストもかからない
- 29. • Sassが使えない環境の人は このCSSを編集してもらう • 全員Sassを使える保証が ない場合 保険として有効
- 30. • 放置すると内容がカオスに • 定期的に内容を マージする必要あり
- 31. • 納品先がCSSを編集する場合 • 修正や追加で戻ってきた時には Sassが使えない… • Sassを入れろ、とは言いえない ➡ Sass管理外のCSSで対応できる
- 32. 修正箇所の見つけ方 • ブラウザから れるのは CSSまで • 問題箇所がどのSassファイ ルにあるかはわからない
- 33. line-comments sass --watch sass:css --style expanded --line-comments
- 34. こうなる : /* line 301, ../sass/core/_utility.scss */ .fuga { clear: both; } /* line 60, ../sass/style.scss */ .hoge { color: red; } :
- 35. • 作業が終わったら元の形式 で再コンパイルすればOK • 迷ったら--line-comments
- 36. :compressedの注意 • 圧縮形式のひとつ • 改行やコメントを削除し て、容量を軽減してくれる
- 37. • コンパイル後、CSSは1行に • 複数人での作業時、 CSSがコンフリクト頻発
- 39. • 作業時は:expandedなど 他の圧縮形式で • 内容確定してから :compressed
- 40. コーディングのポイント
- 41. 色値の扱いのコツ • 変数に色値を入れると、 カラーネームに 自動変換される
- 42. 変換例 //変換されない .hoge{ compiled color: #000000; } CSS //変換される .hoge{ $color:#000000; color: #000000;} .piyo{ color: $color; .piyo { } color: black;}
- 43. • Sass3.2で変換対象の カラーネームが激増 • カラーネームのほうが 色値より長い場合がある
- 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. • 長くなるのはちょっと… • 色値とカラーネームが 混ざるのも気になる • 回避策は用意されていない ➡ ので何とかしたい
- 46. 対応策 : 変換できない色値にする //カラーネームに存在しないので変換されない $color:#000001; .piyo{ color: $color; } CSS .piyo { compiled color:#000001;}
- 48. 対応策 : 文字列型で管理する //文字列型にしてから、クォートを外す $color:unquote('#000000'); .piyo{ color: $color; } CSS .piyo { compiled color:#000000;}
- 49. 対応策 : 文字列型で管理する //これでも同じ $color:#{'#000000'}; .piyo{ color: $color; } CSS .piyo { compiled color:#000000;}
- 51. • 出力を:compressedにする • 色値/カラーネームのうち 最も短い方を 自動的に選択してくれる ➡ 両方の混在は回避できない
- 52. • Sassスクリプト自体を修正 • カスタムSass関数で対応 ➡ 導入や作業者間の共有で難あり
- 54. コードの保守性を上げる • Mixin、@extend、変数、 Sassコメント ➡ そのコードが何を意図したものかを 明確にできる
- 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. Sassではこう .hoge{ @include img-replacement (20px,30px,'hoge.png'); @include box-shadow ('1px 0 1px #000'); border:1px solid #000; }
- 57. • 何のためのコードか、 考える必要がない • 要素固有のルールセットが 見つけやすい ➡ 他人が見てもわかりやすい
- 58. • 変数を使うと値そのものに 名前を付けられる • 何のための値か明示できる
- 59. 変数を使わないで書く .hoge{ background-color:#000; @include linear-gradient (top, #000, #fff); }
- 60. ちょっとだけ使いやすいソース .hoge{ $start:#000; $end :#fff; background-color:$start; @include linear-gradient (top,$start,$end); }
- 61. • 引数に直接値を書くと 値を使いまわしづらい • コピペもしづらい • 変数で取り回しがよくなる
- 62. • 演算を使う場合も 細かくコメントしておく • Sassコメントは CSSに出力されないため、 気軽に書ける
- 63. コンパイル後を意識する • Mixinは@includeされた 箇所で毎回展開される ➡ CSSが醜く肥大化する恐れ
- 64. • Mixin以外にも • 不要なネスト • @importの重複 ➡ 気がつくと肥大化してたりする
- 65. • CSSのベタ書きよりも 容量が増えたのでは意味が無い • コンパイル結果をイメージした コーディングが重要 ➡ たまにはコンパイルしたCSSを 見てみましょう
- 66. @extendを安全に使う • 任意のルールセットに、 グループセレクタとして 追加してくれる
- 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. • コードのスリム化 • グループセレクタの 管理が容易に
- 69. ただし
- 71. 恐怖
- 72. • 運用でカバー • @extendしたいCSSは クラス名"extend-"で用意 • その他のルールセットへの @extendは禁止
- 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. 安心
- 75. • しかしこんな問題も • どこからも@extendしなくても、 .extend-のルールセットは 出力されてしまう • @extendすると、 必ず不要なセレクタが出力される
- 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. 不要なセレクタが出力される .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. • Placeholder Selector (Sass3.2から登場) • 無駄なセレクタを 抑制できるようになった
- 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;}
- 81. 後編につづく
Editor's Notes
- \n
- \n
- 実践Sassのセッション\n
- よむ\n
- sassの入門書を共著した→\nepubの電子書籍だけどブラウザから見れる→\nアクセス ⌘tab\n
- 前編は後編に分かれている\n読む\n
- \n
- よむ\n前置きはこのぐらいにして本編を始めます\n
- 本編をはじめる前に、前置きをもう一点、 \n発表中に「Sass」や「Sassファイル」と言った場合、\nそれは「SCSS記法」で書かれた「.scss」ファイルを指しています。\n エスシーエスエスっていうのはなにせが発音しづらいので、\nサンプル説明などで、scssファイルについてサスファイルなどといった場合は任意で脳内補完をおねがいします。\n scss記法の他にsass記法というのがあって混乱しがちですが、\n今回はsass記法については触れませんので、\nsassといったらscssであるということでひとつよろしくおねがいします\nという感じで、前置きはこのぐらいにして、そろそろ本編を始めさせていただきたいと思います\n
- \n
- 弊社のMEの6,7割がmacをつかってます→\nエディタもvimやcoda、dwなどバラバラ→\nSassは全員CUIで導入した→\nただ全員が黒い画面を使いこなしてるわけではない\nwikiにインストール方法などをまとめて共有\n\n
- Sassを導入してCSSから変わる点\nコンパイルが必要→\nよむ\nプロジェクトごとに変わってくる\n
- なので、プロジェクトごとにwikiで共有しました→\nしかし人力なので忘れるなど\nヒューマンエラーもある\n
- compassを使うともっと簡単に共有できる→\ncompassとは、\ncss3のミックスインなどがつまったライブラリと、\nSassにはない拡張機能が使えるようになるフレームワーク\n
- compassにはconfig.rbという設定ファイルが必要です\nそこに対象ディレクトリや形式を書いておく\n\nそして、それをプロジェクトごとに\nルートにコミットしておきます\n
- あとは\ncompass watchでOK→\n全プロジェクト共通でこのコマンドだけでよくなるため\n共有のミスなどは避けられます\n
- 続きまして環境差異についてです\nさきほどご覧頂いたとおり、弊社のMEの環境はバラバラ\nそんな中でSassを使っていると→\nよむ\nあ\n
- \n
- 続きましてSassのツールについてです\nsassにはGUIツールもある\nMEでもCUIが苦手な人や、\nデザイナーディレクターにインスコしてもらいたい場合は\nGUIを使いましょう→\n混在しても問題はないので、心置きなく使って行きましょう\n次に、メジャーなGUIツールである\nscout、config.appについて軽く紹介します\n
- 一つ目はスカウトです→\n無償で→コンパスにも対応しています→\nしかしサイトからDLできるバージョンは古くてconfigが読めない\nリンククリック\n→githubからDLしましょう。\nリンククリック\nこちらの最新版はconfigと3.2に対応済み\n戻る\n→ただ、無償ということもあるのかリリースが遅い\n
- よむ\n最後にサイト開いてみせる\n以上が、導入時に気になったポイントです\n
- 続きまして運用時のポイント\n
- 弊社では複数MEでひとつのプロジェクト作業することがあります\n弊社に限らず規模がある程度のところではよくある話\n当然対策が必要になる\n
- sassはこのように作業者ごとに\nファイルを分割して作業しました\n
- ファイル分割コツは、\n分割ファイルはパーシャルで作成する→\nファイル名の最初にアンダーバーを\nつけるとパーシャルになります\n
- パーシャルファイルとはなにかというと\nSassはコンパイル時に、sassディレクトリにある\nsassファイルと同名のCSSファイルを出力します\nこの際パーシャルのCSSは出力さません\n
- ではどう使うか。\nインポート前提→\nコンパイル時にマージされてCSSに出力されます\n
- 図で見るとこういう流れになります\n
- 読む\nこのような形で、\n作業者が複数になる場合は対応していました\n
- 続きまして、CSSを直接触りたい人がいる場合についてです\n例えばDがCSSをわかっていると、\nMEに依頼するまでもない細かい修正をDがやってしまうケース\nDもSassをインスコしているといいのですが、\n人数が増えれば増えるほど、全員にSassインスコの徹底は難しい\n
- そんな状況に対応するため\nよむ\n
- \n
- \n
- 自社案件でなく、受託開発の場合でも\nよむ\nかといってsassをインストールしてとはいいづらいです。\nそれよりも、このCSSに編集してくださいのほうが\n依頼しやすいかとおもいます\n\n頻繁に戻りがあるようなケースで相手方とコンセンサスがとれれば、\nひとつの方法としてはありかとおもいます\n
- 続いて修正箇所の見つけ方です\nブラウザで問題箇所を見つけた時、\n辿れるのはCSSまでです\n問題がsassのどこにあるかはわかりません\nとくに複数ファイルにまたがっている場合、\nどこに書いてあるか探すのに手間取る\n
- sassにはline-comentという出力がよういされています\nコンパイル時に指定することで、\nCSSにsassのどこにかいてあるかを出力してくれます\n具体的に見てみます\n
- これはラインコメントで出力したCSSです\n左から行数、ファイルのパスをCSSに出力してくれる\n
- \n
- 次に、compressedの注意点についてです\n読む\n
- \n
- \n
- 以上が運用全般でのポイントとなります\nつぎに、コーディング作業時の細かなポイントについて見てみます\n
- \n
- まずは色値の扱いです\nSassでは、\nよむ\n
- 具体的に見ましょう\nCSSの形式でベタ書きしている場合は変換されませんが、\n変数に格納してしまうと、カラーネームに変換されてしまいます\n
- この変換対象ですが、3.2になって激増しました。\n中には、色値より長いカラーネームも存在します\n
- \n
- 長くなってしまうのは歓迎できるものではありません\n混ざるのも気になります。\n出来れば変換しないで細しいですが\n困ったことに回避策が用意されていません\n
- よむ\n
- \n
- 2つめは文字列型で管理する方法です\n色値をクォートすることで文字列型にしつつ、\nアンクォート関数により文字列型のままで\nクォートを取り除きます\n\n
- アンクウォート関数は書くのが面倒なので\nハッシュマークを使ったこちらでも構いません\n
- \n
- \n
- \n
- \n
- コードの保守性を上げるコツです。\n内容としてはmixin、extend、変数、Sassコメントなど、\nSassの機能を正しく使おう、というものです。\nこれらを上手に使っていく事で、\nCSSのコードの塊について、\nどのコードがどんな意図を持って書かれたものか、\n明確にしていくことができます\n
- 例えばこんなCSSです。\nぱっと見長くて解読するのに骨が折れそうですが\n
- Sassではこうできました。\nimg-replacementはNHN Japanのライブラリで、\nCSSの画像置換をミックスイン化したものです。\nこのように、ミックスインによって、\nこの要素は画像置換の他には\nborderとboxshadowがあるとすぐに分かる\n
- よむ\n使いやすいものにできるし、\nそうしなければSassを使う意味が無いとも言える。\n
- 変数を使っても同じように\nちょっとした保守性を高めることができます\n読む\n
- \n
- \n
- \n
- よむ\nこのように、Sassの機能をきちんとつかっていくことで、\n保守性の高いコードをつくることができます\n
- Sass側のコードの保守性も重要ですが、\nコンパイル後、つまりCSSを意識したコーディングも重要\nたとえばmixin\n読む\n
- \n
- \n
- コンパイルしたコードを減らす方法として、\nextendがある\nextendとは何かというと\n読む\n
- .fooを、hogeとfugaがextend。\nコンパイルすると、右下のCSS。\nfooに、hogeとfugaが\nグループセレクタとして追加す\n
- \n
- \n
- 運用のルールを決めておかずに使ってしまうと、→\nコードを修正する場合→\n常に、どこからかextendされているかもという\n危険がともなうことになります\n
- まつ\nこれでは恐ろしくてうかつに修正もできません\n
- そんな状況を回避するために、運用でカバーします\nNHNJapanでは、・・・読む\n
- コードを見てみます。\n.extend-boxというextend用のルールセットを作り、\nそれをextendしています。\nこうすることで、\nどこかしらで修正作業が発生した場合も、\nextendされるものとそうでないものが明確なので\n影響範囲がわかりやすく、安心して作業できます\n
- まって\n\n安心です\n
- ただそれでもまだ問題がありました\nよむ\n
- .extend-boxはどこからも\n@extendされていない\nCSSには出てしまう\n赤字の部分\n
- extendしている場合も\nルールセットにHTMLからは指定しない\nextend-boxがでてしまう\n
- \n
- さきほどとほとんど同じですが、\nCSSの方に出力されていません。\n綺麗なコードを保つことができます\nまた、extend-と明示するまでもなく%はextend前提のため、\nクラス名のextend-を取っています・\n冗長だった@extend extend-の部分も綺麗になります\n\n
- 読む\nネストやミックスインと比べて、使い始めの頃は今ひとつ使いにくく感じてしまうextendですが、非常に強力な機能ですので、是非使ってみてください。\n\n
- 以上で前編の内容は終了となります。\n引き続き後半に映らせて頂きます\n