Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

11.478 visualizaciones

Publicado el

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

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

Publicado en: Diseño
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • すごくよい資料でした。
    CSS書く人にもコンパイルとかmix-inとかextendとかプログラミングの概念が求められる時代だから大変だよなぁ。
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

パフォーマンスから考える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

×