パフォーマンスから考えるSass/Compassの導入・運用
•
57 gostaram•12,765 visualizações
- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 months.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a パフォーマンスから考えるSass/Compassの導入・運用
Semelhante a パフォーマンスから考えるSass/Compassの導入・運用 (20)
Mais de Koji Ishimoto
Mais de Koji Ishimoto (18)
Último
Último (20)
パフォーマンスから考えるSass/Compassの導入・運用
- 1. 事例： パフォーマンスから考える Sass/Compass 導入・運用 アメーバ事業本部 コミュニティ部門 第3コミュニティ事業部 Webディベロッパー 石本 光司 2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」
- 2. @t32k
- 5. 今日のながれ - 私のバックグラウンド - Sass/Compassの導入・運用 - 序：Syntax/@import - 破：Nesting/@mixin/@extend - 急：Compass/Styleguide - 成果とまとめ
- 6. 私のバックグラウンド
- 7. 2012.06.01
- 8. 2012.06.01
- 10. Web Director? 大規模サイトにおけるGoogleアナリティクス導入から成果まで | CSS Nite LP, Disk 19
- 11. アクセス解析あきたわー (・石・) Koji Ishimoto @t32k 9, April, 2012
- 13. Web Developer! Measuring Web Perf. - 自己満足で終わらないためのパフォーマンス計測 - | CSS Nite LP, Disk 23
- 14. 俺いちからやり直すわー (・石・) Koji Ishimoto @t32k 1, June, 2012
- 15. Start a web develop
- 20. それなんて無理ゲーよ (・石・)？ Koji Ishimoto @t32k 4, June, 2012
- 22. Speed!
- 25. You know me ?
- 28. introduction
- 29. $ gem install sass
- 30. Syntax
- 31. .scss Sassy CSS .sass Indented Syntax
- 32. .scss.sass =table-base th text-align: center font-weight: bold td, th padding: 2px =left($dist) float: left margin-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; }
- 33. output.css #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }
- 34. .scss.sass =table-base th text-align: center font-weight: bold td, th padding: 2px =left($dist) float: left margin-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; }
- 37. Love Sassy CSS
- 38. @import
- 42. 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";
- 43. 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
- 44. development
- 45. Sass is powerful and dangerous. Jon Rohan @johnrohan 05, December, 2012
- 46. Nesting
- 47. .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; }
- 50. ／(^o^)＼
- 51. Sass を使おうが LESS を使おうが、 カジュアルにセレクタを増やしては いけない。セレクタは詩である。 Kokubo Kotarao @kotarok 25, February, 2012
- 52. Don’t go more than four levels deep.
- 53. @mixin/@extend
- 54. 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; }
- 55. 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; }
- 56. 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; }
- 57. 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; }
- 62. // 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
- 63. .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 .activity a:after, .wall .wrapper-child:before, .enquete .list-opt input:checked ~ label:after, .enquete .list-opt label.active:after, .enquete .list- qa .talk:after, .enquete .right a:after, .enquete .box- pager .btn:after { display: block; content: ""; } output.css
- 64. ／(^o^)＼
- 65. .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.html ex2.css
- 66. However, not all semantics need to be content-derived. Nicolas Gallagher @necolas 02, August, 2012
- 67. climax
- 68. Compass
- 70. $ gem install compass
- 71. CSS Sprite
- 72. CSS Sprite
- 73. CSS Sprite
- 74. ico_category.png
- 80. ／(^o^)＼
- 82. Generate Image Generate Code (Calculate background-position)
- 83. // 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; } }
- 84. // 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); } } }
- 88. Styleguide
- 89. Not “Create Page” , But “Create System”. Jina Bolton @jina 02, August, 2012
- 92. $ npm install -fg styledocco
- 94. 成果とまとめ
- 96. ガールズトークの改善が早くて感心 藤田晋 @susumu_fujita 19, August, 2012
- 98. 0 2,000,000 4,000,000 6,000,000 8,000,000 10,000,000 1week 2week 3week 4week 5week 6week 7week 8week 9week 10week 11week 12week 13week 14week 15week 16week GIRL’S TALK Weekly Pageviews PV 4000万PV
- 99. 俺やったったわー (・石・) Koji Ishimoto @t32k 12, January, 2013
- 100. Baby Steps
- 102. I think CSS is awesome! But it could be even better. Nicole Sullivan @stubbornella 09, November, 2009
- 103. Try&Error
- 104. Sass doesn't create bad code. Bad coders do. Roy Tomeji @roy 02, February, 2012
- 105. smacss.com
- 106. ちゃんとCSSを書け！ Yuya Saito @cssradar 15, October, 2012
- 107. Thank you! t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop