実践Sass 後編

23,971 views

Published on

HTML5 Conference 2012 で使用したスライドです。
前編のスライドはこちらです。
http://www.slideshare.net/azusatomita3/sass-14212266

0 Comments
64 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
23,971
On SlideShare
0
From Embeds
0
Number of Embeds
16,586
Actions
Shares
0
Downloads
85
Comments
0
Likes
64
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 実践Sass 後編

    1. 1. 実践Sass 後編
    2. 2. $company: NHN Japan$twitter: @kosei27$website: www.culture27.com
    3. 3. • 後編はライブラリを つくる側の視点でお話します• ライブラリ ≒ ちょっと便利なミックスインや 関数が集まったパーシャルファイル
    4. 4. Agenda1. 社内ライブラリを作った理由2. 社内ライブラリの管理3. 社内ライブラリの中身4. 社内ライブラリを作った結果
    5. 5. 社内ライブラリを 作った理由
    6. 6. Sassの導入時、Compassも当然検討しましたhttp://compass-style.org/
    7. 7. 多機能だし便利そうこれでいいかも?
    8. 8. でも、、• CSSの新しい構文に一部未対応だった• 一部ミックスインの引数が多かった• 不要なベンダープリフィックスが出てた※今はかなり改善されているようです
    9. 9. あと、• ミックスインや関数の サンプルコードやデモが少なかった• 外部に依存するのはまだ避けたかった※今もサンプルコードやデモは少ない…
    10. 10. それに、、• 自社用に特化したものが欲しい• 自分で書いてみた方が勉強になる• なので、とりあえず作ってみたい
    11. 11. 作ってみました
    12. 12. 社内ライブラリの管理
    13. 13. sass @mixin _setting.scss @function _utility.scss style.scss
    14. 14. sass @mixin _setting.scss @function _utility.scss style.scss @import
    15. 15. sass @mixin _setting.scss @function _utility.scss style.scss @import style2.scss他のファイルも同様にして、どこでも使えるように。
    16. 16. もっと細かいことはこちら…NAVERでのSassの使い方 « NAVER Engineers Bloghttp://tech.naver.jp/blog/?p=1027
    17. 17. 社内ライブラリの中身
    18. 18. いろいろ作ってみました• CompassにもあるCSS3用のもの• その他、地味だけど便利なもの
    19. 19. いくつか紹介します1. inline-block2. Link Underline3. font-family4. Placeholder Color5. Minor CSS Hacks
    20. 20. •断っておきますが、•基本的に地味です•でも便利です
    21. 21. 1. inline-block
    22. 22. display: inline-block;.sample { display: inline-block; *display: inline; *zoom: 1;}
    23. 23. 毎回書くのはめんどう
    24. 24. display: inline-block;のミックスイン@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;}
    25. 25. ミックスインを使う@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;}.sample { @include inline-block;}
    26. 26. 地味に便利ですね
    27. 27. 問題: IE6/7対応が不要になった時.sample { display: inline-block; *display: inline; *zoom: 1;}無駄なコードが出たままに…。
    28. 28. 問題: IE6/7対応が不要になった時@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;} delete?
    29. 29. 削除した場合の問題点• 別プロジェクトのライブラリと 差ができてしまう• 後でやっぱりIE6/7対応が 必要になった時に面倒
    30. 30. 解決策グローバル変数を使って、出力するコードを出し分ける
    31. 31. 変数でコードを出し分ける$support-ie6: false !default;$support-ie7: false !default;これはIE6/7対応が不要な場合。
    32. 32. variables for settings sass _setting.scss _utility.scss style.scss @importプロジェクト全体の設定用なので、どこでも使えるように。
    33. 33. ほか、設定用の変数// HTML5の要素の使用$use-html5: true !default;// IE8-10, Firefox, WebKit, Opera$support-ie8 : true !default;$support-ie9 : true !default;$support-ie10 : true !default;$support-mozilla: true !default;$support-webkit : true !default;$support-opera : true !default;これらを使ってコードの出し分けをします。
    34. 34. 変数でコードを出し分ける@mixin inline-block { display: inline-block; @if $support-ie6 or $support-ie7 { *display: inline; *zoom: 1; }}2つの変数のどちらかがtrueであればIE用のコードが出ます。
    35. 35. 変数でコードを出し分ける// _setting.scss$support-ie6: false !default;$support-ie7: false !default;// _utility.scss@mixin inline-block { display: inline-block; @if $support-ie6 or $support-ie7 { *display: inline; *zoom: 1; }}IE6/7対応が必要になったら、trueにしてコンパイルするだけ。
    36. 36. より地味に便利ですね
    37. 37. 2. Link Underline
    38. 38. 1. あり → なし2. あり → あり3. なし → あり4. なし → なし
    39. 39. 下線 あり→なし パターン.link {! ! &:link,! ! &:visited { text-decoration: underline; }! ! &:hover,! ! &:active,! ! &:focus { text-decoration: none; }}
    40. 40. 毎回書くのはめんどう
    41. 41. ミックスインを使う.link { @include link-underline(line-to-none);}
    42. 42. ミックスインのコード@mixin link-underline($type) { @if $type == line-to-none { // 1.あり→なし &:link, &:visited {text-decoration: underline;} &:hover, &:active, &:focus { text-decoration: none;} } @else if $type == line { // 2.あり→あり &:link, ..., &:focus { text-decoration: underline; } } @else if $type == none-to-line {..} // 3.なし→あり } @else if $type == none {..} // 4.なし→なし}
    43. 43. タイプを指定する@include link-underline(line-to-none);@include link-underline(line);@include link-underline(none-to-line);@include link-underline(none);
    44. 44. 地味に便利ですね
    45. 45. 3. font-family
    46. 46. font-familyのコードfont-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif;font-family: Verdana, Arial, Helvetica, sans-serif;組み合わせは他にも沢山。
    47. 47. font-familyのコードfont-family: monospace, serif; for WebKit// For IE6_font-family: MS Gothic, monospace; underscore hackCSSハックを使わないといけないケースも。
    48. 48. 毎回書くのはめんどう
    49. 49. ミックスインのコード@mixin font-family($type, $important: null) { @if ($important == important) or $important { $important: !important; } @if $type == sans-serif { font-family: sans-serif#{$important}; @if $support-ie6 { _font-family: MS PGothic, sans-serif#{$important}; } } @else if $type == serif { font-family: serif#{$important}; @if $support-ie6 { _font-family: MS Mincho, serif#{$important}; } } @else if $type == meiryo { font-family: Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == monospace { font-family: monospace, serif#{$important}; @if $support-ie6 { _font-family: MS Gothic, monospace#{$important}; } } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == verdana { font-family: Verdana, Arial, Helvetica, sans-serif#{$important}; } @else if $type == tahoma { font-family: Tahoma, Arial, Helvetica, sans-serif#{$important}; }}
    50. 50. ミックスインのコード@mixin font-family($type, $important: null) { @if ($important == important) or $important { $important: !important; } : } @else if $type == monospace { font-family: monospace, serif#{$important}; _font-family: MS Gothic, monospace#{$important}; } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; :}
    51. 51. タイプを指定する@include font-family(hiragino);@include font-family(monospace);@include font-family(**, important);!important宣言もしたい場合は、第2引数にimportantを。
    52. 52. 地味に便利…ですが、
    53. 53. ミックスインのコード@mixin font-family($type, $important: false) { @if $important == important or $important == true { $important: !important; } @else { $important: ; } @if $type == sans-serif { font-family: sans-serif#{$important}; ちょっと @if $support-ie6 { _font-family: MS PGothic, sans-serif#{$important}; } } @else if $type == serif { font-family: serif#{$important}; @if $support-ie6 { _font-family: MS Gothic, serif#{$important}; 失敗でした } } @else if $type == meiryo { font-family: Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == monospace { font-family: monospace#{$important}; @if $support-ie6 { _font-family: MS Gothic, monospace#{$important}; } } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == verdana { font-family: Verdana, Arial, Helvetica, sans-serif#{$important}; } @else if $type == tahoma { font-family: Tahoma, Arial, Helvetica, sans-serif#{$important}; }}
    54. 54. 失敗だった理由IE6対応も隠せたし、便利は便利でした…が、他の人が別のフォントを追加しにくい…
    55. 55. 教訓1. ムリにCSSハックを 隠そうとしない2. 他の人がパターンを 追加するケースを考える
    56. 56. 解決策素直に変数を使う
    57. 57. 素直なコード$ff-hiragino: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif !default;.sample { font-family: $ff-hiragino;}
    58. 58. 素直なコード$ff-monospace: monospace, serif !default;$ff-monospace-ie6: MS Gothic, monospace !default;.sample { font-family: $ff-monospace; _font-family: $ff-monospace-ie6;}
    59. 59. Font-family用の変数// # English$ff-arial: Arial, Helvetica, sans-serif !default; :// # Japanese$ff-meiryo : Meiryo, MS PGothic, sans-serif !default;$ff-hiragino: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif !default; :// # Korean$font-dotum-escape: B3CBC6C0; // 돋움(dotum)$ff-dotum: #{$font-dotum-escape}, dotum, Arial, sans-serif !default;
    60. 60. 地味に便利ですね
    61. 61. 4. Placeholder Color
    62. 62. placeholderのコード 2 colons::-webkit-input-placeholder { color: red; }:-moz-placeholder { color: red; } 1 colon地味に違いがある。今後はIE10用にさらに1行追加…?
    63. 63. 毎回書くのはめんどう
    64. 64. ミックスインを使う@include placeholder-color(red);
    65. 65. コンパイル後のコード::-webkit-input-placeholder { color: red; }:-moz-placeholder { color: red; }
    66. 66. ミックスインのコード@mixin placeholder-color( $color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; } #{$selector}:-moz-placeholder { color: #{$color}; }}
    67. 67. セレクタを指定するinput { @include placeholder-color(**, "&");}// コンパイル後のCSSinput::-webkit-input-placeholder {..}input:-moz-placeholder {..}親セレクタの参照の「&」を使う。
    68. 68. セレクタを指定する<input type="text" required placeholder="**">// SCSSinput { @include placeholder-color(**, "&:required");}// コンパイル後のCSSinput:required::-webkit-input-placeholder {..}input:required:-moz-placeholder {..}
    69. 69. セレクタを指定するinput { @include placeholder-color(#333, "&"); @include placeholder-color(blue, "&:required");}// コンパイル後のCSSinput::-webkit-input-placeholder {..}input::-moz-placeholder {..}input:required::-webkit-input-placeholder {..}input:required::-moz-placeholder {..}
    70. 70. 地味に便利ですね
    71. 71. @contentでより便利に
    72. 72. @contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; }}{}を使ってコードブロックを記述して、@mixinに渡す。
    73. 73. @contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; }}コードブロックを入れたい場所に@contentを書く。
    74. 74. 現時点ではFirefoxはcolor以外は効かないので@contentなし。@contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; CSS }} input::-webkit-input-placeholder { color: red; background-color: blue; compiled font-style: italic; } input:-moz-placeholder { color: red; }
    75. 75. 地味に便利ですね
    76. 76. 5. Minor CSS Hacks
    77. 77. マイナーなCSS Hackの例button::-moz-focus-inner { border: 0; padding: 0;}これ、なんのハックだっけ…。
    78. 78. 調べるのはめんどう
    79. 79. ミックスインを使うbutton { @include hack-fx-remove-button-padding;}
    80. 80. ミックスインのコード// Firefoxでbutton要素に自動的に追加される余白を取り除く// http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/@mixin hack-fx-remove-button-padding { &::-moz-focus-inner { padding: 0; border: 0; }}このハックがどんなものか、他の人や自分が探す手間が省ける。
    81. 81. 地味に助かりますね
    82. 82. ライブラリを作る手順
    83. 83. ライブラリを作る手順1. 毎回書くのが面倒なコードを見つける2. とりあえずミックスイン化する3. 引数でプロパティの値を 変更できるようにする4. 設定用の変数でコードを 出し分けられるようにする
    84. 84. ちゃんと使われるために• ドキュメントを用意する• 最初は説明会を開くと効果的
    85. 85. ドキュメントの内容• ファイルの一覧とその役割• 設定用変数の一覧とその役割• ミックスイン • 役割や引数の説明 • 使い方のサンプル(CSS to SCSS)
    86. 86. 作る時に気をつける点
    87. 87. グローバル変数とローカル変数$foo: 5px; // グローバル変数.sampleA { $bar: 10px; // ローカル変数}仕様にはありませんが、便宜上、こんな感じで…。
    88. 88. ローカル変数のスコープ.sampleA { $foo: 5px; $fooのスコープ margin: $foo; (使える範囲)}.sampleB { margin: $foo; // スコープ外 → エラー}
    89. 89. グローバル変数のスコープ$foo: 5px;.sampleA { margin: $foo; // -> 5px 宣言後は} どこでも 使える.sampleB { margin: $foo; // -> 5px}
    90. 90. グローバル変数と同名のローカル変数$foo: 5px;.sampleA { $foo: 10px; // グローバル変数の$fooを上書き margin: $foo; // -> 10px}.sampleB { margin: $foo; // -> こっちも 10px}
    91. 91. グローバル変数と同名のローカル変数.sampleA { $foo: 10px; margin: $foo; // -> 10px}$foo: 5px; // -> ここから先はグローバル変数?.sampleB { margin: $foo; // -> 5px}
    92. 92. おこるかもしれない問題ローカル変数と同名のグローバル変数を追加する・されると、出力結果が変わってしまう
    93. 93. 解決策ローカル変数の命名ルールをつくる
    94. 94. ローカル変数の命名ルール$foo: 5px;.sampleA { $_foo: 10px; // ローカル変数 margin: $_foo; // ローカル変数を使う}.sampleB { margin: $foo; // グローバル変数を使う}$_から始める。グローバル変数と被らなければ何でもいいです。
    95. 95. ミックスイン内のローカル変数$foo: 5px;@mixin sample { $_foo: 10px; margin: $_foo; // 意図的に $foo を上書き $foo: $_foo * 2;}@mixinや@function、ネストの中も同じルールで。
    96. 96. 例外@mixinの引数だけはグローバル変数と同名でも干渉しあわない
    97. 97. @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo;}
    98. 98. @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo; // -> ????px}marginは10px、paddingはどうなるのか。
    99. 99. @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo; // -> 5px が出力される!}グローバル変数の$fooと@mixinの引数$fooは別物として処理。
    100. 100. 社内ライブラリを 作った結果
    101. 101. コストがかかりました…• 新規作成コスト• 検証コスト(品質保障)• 仕様変更対応コスト(CSS/Sass)
    102. 102. コストはかかりましたがいいこともあります!
    103. 103. いいこと 1コードを読み書きして理解が深まった➡ なので、よいコードが 書けるようになった(はず)
    104. 104. いいこと 2自社用に特化したコードや得たノウハウを共有できた➡ チーム全員の作業効率も上がった
    105. 105. いいこと 3電子書籍を出せました!(注:書店にはありません) ➡ 『Sass入門』 ➡ Sass 3.2の機能について 追加執筆予定
    106. 106. ただ、オススメするのは…1. Compassを導入(初期コスト減)2. その中で必要なものだけ使う3. 問題があるところは、 ムリに使わないか、自作して解決する
    107. 107. Compassを使いつつ、自作ライブラリを育てよう!
    108. 108. ありがとうございました

    ×