Your SlideShare is downloading. ×
0
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
パフォーマンスから考えるSass/Compassの導入・運用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

9,738

Published on

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

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
55 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,738
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
43
Comments
1
Likes
55
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 事例:パフォーマンスから考えるSass/Compass 導入・運用アメーバ事業本部 コミュニティ部門 第3コミュニティ事業部Webディベロッパー 石本 光司2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」
  • 2. @t32k
  • 3. デザインから考えるハイパフォーマンスWebサイトWebパフォーマンス最適化のためのコーディング手法 心理学から考えるWebパフォーマンス
  • 4. t32k.github.com/speed/
  • 5. 今日のながれ- 私のバックグラウンド- Sass/Compassの導入・運用- 序:Syntax/@import- 破:Nesting/@mixin/@extend- 急:Compass/Styleguide- 成果とまとめ
  • 6. 私のバックグラウンド
  • 7. 2012.06.01
  • 8. 2012.06.01
  • 9. Eコマース大規模レガシーPCサイト
  • 10. Web Director?大規模サイトにおけるGoogleアナリティクス導入から成果まで | CSS Nite LP, Disk 19
  • 11. アクセス解析あきたわー (・石・)Koji Ishimoto @t32k 9, April, 2012
  • 12. コミュニティ・ゲーム小・中規模エッジスマホアプリ
  • 13. Web Developer!Measuring Web Perf. - 自己満足で終わらないためのパフォーマンス計測 - | CSS Nite LP, Disk 23
  • 14. 俺いちからやり直すわー (・石・)Koji Ishimoto @t32k 1, June, 2012
  • 15. Start a web develop
  • 16. Sass/Compassの導入・運用
  • 17. 2012.06.04Assign2012.08.09Release!2012.06.01Join
  • 18. 2012.06.04Assign2012.08.09Release!2ヶ月2012.06.01Join
  • 19. それなんて無理ゲーよ (・石・)?Koji Ishimoto @t32k 4, June, 2012
  • 20. UI DesignerJavaScriptHTML/CSSProduceriOS/AndroidEngineerSystemEngineerSystemEngineerSystemEngineer
  • 21. Speed!
  • 22. Page SpeedDevelopment Speed
  • 23. ((((;゚д゚))))アワワワワ
  • 24. Youknow me ?
  • 25. github.com/enja-oss/Sass
  • 26. github.com/enja-oss/Sass日本語おk
  • 27. introduction
  • 28. $ gem install sass
  • 29. Syntax
  • 30. .scss Sassy CSS.sass Indented Syntax
  • 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. output.css#data {float: left;margin-left: 10px;}#data th {text-align: center;font-weight: bold;}#data td, #data th {padding: 2px;}
  • 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. LoveSassyCSS
  • 35. @import
  • 36. t32k.github.com/speed/rtt/AvoidCssImport.html
  • 37. box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.css
  • 38. box-modal.css header.csslist.cssmypage.cssnav_global.css nav_category.cssjser.cssapp.cssCompiled!
  • 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. 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. development
  • 42. Sass is powerful and dangerous.Jon Rohan @johnrohan 05, December, 2012
  • 43. Nesting
  • 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. www.ca-girlstalk.jp/category_new
  • 46. /(^o^)\
  • 47. Sass を使おうが LESS を使おうが、カジュアルにセレクタを増やしてはいけない。セレクタは詩である。Kokubo Kotarao @kotarok 25, February, 2012
  • 48. Don’t go more than four levels deep.
  • 49. @mixin/@extend
  • 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. 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. 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. 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. @extendエクステンドかわいいよエクステンド(´Д`;)(;´Д`)ハァハァ
  • 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. .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. /(^o^)\
  • 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. However, not all semantics needto be content-derived.Nicolas Gallagher @necolas 02, August, 2012
  • 60. climax
  • 61. Compass
  • 62. compass-style.org
  • 63. $ gem install compass
  • 64. CSS Sprite
  • 65. CSS Sprite
  • 66. CSS Sprite
  • 67. ico_category.png
  • 68. ico_category_v2.png
  • 69. ico_category_v3.png
  • 70. ico_category_v4.png
  • 71. ico_category_v5.png
  • 72. ico_category_v6.png
  • 73. /(^o^)\
  • 74. CSS Sprite Compass
  • 75. Generate ImageGenerate Code(Calculate background-position)
  • 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. // 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. categories-s99406a96f7.png/files/img/sprites/categories/*.png
  • 79. Styleguide
  • 80. Not “Create Page” ,But “Create System”.Jina Bolton @jina 02, August, 2012
  • 81. twitter.github.com/bootstrap/
  • 82. github.com/jacobrask/styledocco
  • 83. $ npm install -fg styledocco
  • 84. 成果とまとめ
  • 85. Released!2012.08.09
  • 86. ガールズトークの改善が早くて感心藤田晋 @susumu_fujita 19, August, 2012
  • 87. 02,000,0004,000,0006,000,0008,000,00010,000,0001week2week3week4week5week6week7week8week9week10week11week12week13week14week15week16weekGIRL’S TALK Weekly PageviewsPV
  • 88. 02,000,0004,000,0006,000,0008,000,00010,000,0001week2week3week4week5week6week7week8week9week10week11week12week13week14week15week16weekGIRL’S TALK Weekly PageviewsPV4000万PV
  • 89. 俺やったったわー (・石・)Koji Ishimoto @t32k 12, January, 2013
  • 90. Baby Steps
  • 91. I think CSS is awesome!But it could be even better.Nicole Sullivan @stubbornella 09, November, 2009
  • 92. Try&Error
  • 93. Sass doesnt create bad code.Bad coders do.Roy Tomeji @roy 02, February, 2012
  • 94. smacss.com
  • 95. ちゃんとCSSを書け!Yuya Saito @cssradar 15, October, 2012
  • 96. Thank you!t32k@t32kkoji.ishimotoTodays latte, Sass. | Flickr by yukop

×