パフォーマンスから考えるSass/Compassの導入・運用

11,045 views

Published on

2013年1月12日(土) 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、石本 光司さん(サイバーエージェント) の『パフォーマンスから考えるSass/Compassの導入・運用』のスライドなどを公開します。

http://cssnite.jp/archives/post_2498.html

Published in: Design
1 Comment
57 Likes
Statistics
Notes
No Downloads
Views
Total views
11,045
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
46
Comments
1
Likes
57
Embeds 0
No embeds

No notes for slide

パフォーマンスから考えるSass/Compassの導入・運用

  1. 1. 事例:パフォーマンスから考えるSass/Compass 導入・運用アメーバ事業本部 コミュニティ部門 第3コミュニティ事業部Webディベロッパー 石本 光司2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」
  2. 2. @t32k
  3. 3. デザインから考えるハイパフォーマンスWebサイトWebパフォーマンス最適化のためのコーディング手法 心理学から考えるWebパフォーマンス
  4. 4. t32k.github.com/speed/
  5. 5. 今日のながれ- 私のバックグラウンド- Sass/Compassの導入・運用- 序:Syntax/@import- 破:Nesting/@mixin/@extend- 急:Compass/Styleguide- 成果とまとめ
  6. 6. 私のバックグラウンド
  7. 7. 2012.06.01
  8. 8. 2012.06.01
  9. 9. Eコマース大規模レガシーPCサイト
  10. 10. Web Director?大規模サイトにおけるGoogleアナリティクス導入から成果まで | CSS Nite LP, Disk 19
  11. 11. アクセス解析あきたわー (・石・)Koji Ishimoto @t32k 9, April, 2012
  12. 12. コミュニティ・ゲーム小・中規模エッジスマホアプリ
  13. 13. Web Developer!Measuring Web Perf. - 自己満足で終わらないためのパフォーマンス計測 - | CSS Nite LP, Disk 23
  14. 14. 俺いちからやり直すわー (・石・)Koji Ishimoto @t32k 1, June, 2012
  15. 15. Start a web develop
  16. 16. Sass/Compassの導入・運用
  17. 17. 2012.06.04Assign2012.08.09Release!2012.06.01Join
  18. 18. 2012.06.04Assign2012.08.09Release!2ヶ月2012.06.01Join
  19. 19. それなんて無理ゲーよ (・石・)?Koji Ishimoto @t32k 4, June, 2012
  20. 20. UI DesignerJavaScriptHTML/CSSProduceriOS/AndroidEngineerSystemEngineerSystemEngineerSystemEngineer
  21. 21. Speed!
  22. 22. Page SpeedDevelopment Speed
  23. 23. ((((;゚д゚))))アワワワワ
  24. 24. Youknow me ?
  25. 25. github.com/enja-oss/Sass
  26. 26. github.com/enja-oss/Sass日本語おk
  27. 27. introduction
  28. 28. $ gem install sass
  29. 29. Syntax
  30. 30. .scss Sassy CSS.sass Indented Syntax
  31. 31. .scss.sass=table-basethtext-align: centerfont-weight: boldtd, thpadding: 2px=left($dist)float: leftmargin-left: $dist#data+left(10px)+table-base@mixin table-base {th {text-align: center;font-weight: bold;}td, th {padding: 2px}}@mixin left($dist) {float: left;margin-left: $dist;}#data {@include left(10px);@include table-base;}
  32. 32. output.css#data {float: left;margin-left: 10px;}#data th {text-align: center;font-weight: bold;}#data td, #data th {padding: 2px;}
  33. 33. .scss.sass=table-basethtext-align: centerfont-weight: boldtd, thpadding: 2px=left($dist)float: leftmargin-left: $dist#data+left(10px)+table-base@mixin table-base {th {text-align: center;font-weight: bold;}td, th {padding: 2px}}@mixin left($dist) {float: left;margin-left: $dist;}#data {@include left(10px);@include table-base;}
  34. 34. LoveSassyCSS
  35. 35. @import
  36. 36. t32k.github.com/speed/rtt/AvoidCssImport.html
  37. 37. box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.css
  38. 38. box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.cssapp.cssCompiled!
  39. 39. app.scss@import "compass";@include global-reset;@import "_config";@import "_common";@import "_header";@import "_nav-global";@import "_nav-category";@import "_list";@import "_list-nest";@import "_box-modal";@import "_entrance";@import "_mypage";@import "_enquete";@import "_advice";@import "_katoken";
  40. 40. app.scss@import "compass";@include global-reset;@import "_config";@import "_common";@import "_header";@import "_nav-global";@import "_nav-category";@import "_list";@import "_list-nest";@import "_box-modal";@import "_entrance";@import "_mypage";@import "_enquete";@import "_advice";@import "_katoken";app.css
  41. 41. development
  42. 42. Sass is powerful and dangerous.Jon Rohan @johnrohan 05, December, 2012
  43. 43. Nesting
  44. 44. .css.scss.component-A {.head {color: #fff;}.body {color: #ccc;}.foot {color: #000;}}.component-B {.head {color: #000;}.body {color: #fff;}.foot {color: #ccc;}}.component-A .head {color: #fff;}.component-A .body {color: #ccc;}.component-A .foot {color: #000;}.component-B .head {color: #000;}.component-B .body {color: #fff;}.component-B .foot {color: #ccc;}
  45. 45. www.ca-girlstalk.jp/category_new
  46. 46. /(^o^)\
  47. 47. Sass を使おうが LESS を使おうが、カジュアルにセレクタを増やしてはいけない。セレクタは詩である。Kokubo Kotarao @kotarok 25, February, 2012
  48. 48. Don’t go more than four levels deep.
  49. 49. @mixin/@extend
  50. 50. mixin.cssmixin.scss@mixin boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinA {@include boxshadow;}.mixinB {@include boxshadow;}.mixinC {@include boxshadow;}.mixinA {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinB {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  51. 51. extend.cssextend.scss.boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.extendA {@extend .boxshadow;}.extendB {@extend .boxshadow;}.extendC {@extend .boxshadow;}.boxshadow, .extendA,.extendB, .extendC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  52. 52. mixin2.cssmixin2.scss@mixin boxshadow($color:#fff) {-webkit-box-shadow: 0 1px 0 0$color;box-shadow: 0 1px 0 0 $color;}.mixinA {@include boxshadow;}.mixinB {@include boxshadow(#ccc);}.mixinC {@include boxshadow(#000);}.mixinA {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.mixinB {-webkit-box-shadow: 0 1px 0 0 #ccc;box-shadow: 0 1px 0 0 #ccc;}.mixinC {-webkit-box-shadow: 0 1px 0 0 #000;box-shadow: 0 1px 0 0 #000;}
  53. 53. extend2.cssextend2.scss%boxshadow {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}.extendA {@extend %boxshadow;}.extendB {@extend %boxshadow;}.extendC {@extend %boxshadow;}.extendA, .extendB, .extendC {-webkit-box-shadow: 0 1px 0 0 #fff;box-shadow: 0 1px 0 0 #fff;}
  54. 54. @extendエクステンドかわいいよエクステンド(´Д`;)(;´Д`)ハァハァ
  55. 55. // Pseudo element initialization%_pe {display: block;content: "";}.back-page a {display: block;position: relative;padding: 10px 10px 10px 25px;&:after {@extend %_pe;position: absolute;width: 7px; height: 10px;top: 13px; right: 11px;background: ( .............. );}}ex1.scss
  56. 56. .ad-area:after, .detail .comment:after, .comment .expand:before,.comment .child:before, .comment .child:after, .thread-notify:before, .line:before, .box-rel .thread:after, .box-rel .right a:after, .cate-new .list-view > li:after, .cate-new .list-view > li > a:after, .cate-new .list-view .c-new >a:after, .cate-new .list-child li:before, .cate-new .list-child a:after, .cate-new .thread:after, .cate-new .thread.new:before, .cate-new.archive .line-text:after, .list-nested .child li:after, .posted-talk .headline:before, .posted-talk li:before, .posted-talk .right a:after, .profile .activitya:after, .wall .wrapper-child:before, .enquete .list-optinput:checked ~ label:after, .enquete .list-optlabel.active:after, .enquete .list-qa .talk:after, .enquete .right a:after, .enquete .box-pager .btn:after {display: block;content: "";}output.css
  57. 57. /(^o^)\
  58. 58. .has-fake {position: relative;}.has-fake:after {position: absolute;display: inline-block;content: "";}<div class="back-page"> <a href="#" class="has-fake">トークへ戻る</a></div>ex2.htmlex2.css
  59. 59. However, not all semantics needto be content-derived.Nicolas Gallagher @necolas 02, August, 2012
  60. 60. climax
  61. 61. Compass
  62. 62. compass-style.org
  63. 63. $ gem install compass
  64. 64. CSS Sprite
  65. 65. CSS Sprite
  66. 66. CSS Sprite
  67. 67. ico_category.png
  68. 68. ico_category_v2.png
  69. 69. ico_category_v3.png
  70. 70. ico_category_v4.png
  71. 71. ico_category_v5.png
  72. 72. ico_category_v6.png
  73. 73. /(^o^)\
  74. 74. CSS Sprite Compass
  75. 75. Generate ImageGenerate Code(Calculate background-position)
  76. 76. // Define Spriting Mixin@mixin sprites($map, $map-item, $isCommon:false) {@if $isCommon {background-image: sprite-url($map);background-size: round(image-width(sprite-path($map)) / 2)round(image-height(sprite-path($map)) / 2);background-repeat: no-repeat;} @else {$pos-y: round(nth(sprite-position($map, $map-item), 2) / 2);width: round(image-width(sprite-file($map, $map-item)) / 2);height: round(image-height(sprite-file($map, $map-item)) / 2);background-position: 0 $pos-y;}}
  77. 77. // Define Map Variable$map-tabs: sprite-map("/files/img/sprites/tabs/*.png");%tabs { @include sprites($map-tabs, common, true); }.nav-global {i {@extend %tabs;display: block;}.tab-new i { @include sprites($map-tabs, new, false); }.tab-fav i { @include sprites($map-tabs, fav, false); }.tab-hist i { @include sprites($map-tabs, hist, false); }.tab-mypage i { @include sprites($map-tabs, my, false); }}}
  78. 78. categories-s99406a96f7.png/files/img/sprites/categories/*.png
  79. 79. Styleguide
  80. 80. Not “Create Page” ,But “Create System”.Jina Bolton @jina 02, August, 2012
  81. 81. twitter.github.com/bootstrap/
  82. 82. github.com/jacobrask/styledocco
  83. 83. $ npm install -fg styledocco
  84. 84. 成果とまとめ
  85. 85. Released!2012.08.09
  86. 86. ガールズトークの改善が早くて感心藤田晋 @susumu_fujita 19, August, 2012
  87. 87. 02,000,0004,000,0006,000,0008,000,00010,000,0001week2week3week4week5week6week7week8week9week10week11week12week13week14week15week16weekGIRL’S TALK Weekly PageviewsPV
  88. 88. 02,000,0004,000,0006,000,0008,000,00010,000,0001week2week3week4week5week6week7week8week9week10week11week12week13week14week15week16weekGIRL’S TALK Weekly PageviewsPV4000万PV
  89. 89. 俺やったったわー (・石・)Koji Ishimoto @t32k 12, January, 2013
  90. 90. Baby Steps
  91. 91. I think CSS is awesome!But it could be even better.Nicole Sullivan @stubbornella 09, November, 2009
  92. 92. Try&Error
  93. 93. Sass doesnt create bad code.Bad coders do.Roy Tomeji @roy 02, February, 2012
  94. 94. smacss.com
  95. 95. ちゃんとCSSを書け!Yuya Saito @cssradar 15, October, 2012
  96. 96. Thank you!t32k@t32kkoji.ishimotoTodays latte, Sass. | Flickr by yukop

×