- 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.

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の
導入・運用

18. 2012.06.04
Assign
2012.08.09
Release!
2012.06.01
Join

19. 2012.06.04
Assign
2012.08.09
Release!
2ヶ月
2012.06.01
Join

20. それなんて無理ゲーよ (・石・)？
Koji Ishimoto @t32k 4, June, 2012

21. UI Designer
JavaScript
HTML/CSS
Producer
iOS/Android
Engineer
SystemEngineer
SystemEngineer
SystemEngineer

22. Speed!

23. Page Speed
Development Speed

24. ((((;ﾟдﾟ))))ｱﾜﾜﾜﾜ

25. You
know me ?

26. github.com/enja-oss/Sass

27. github.com/enja-oss/Sass
日本語おｋ

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

39. t32k.github.com/speed/rtt/AvoidCssImport.html

40. box-modal.css header.css
list.cssmypage.cssnav_global.css nav_category.css
jser.css

41. box-modal.css header.css
list.cssmypage.cssnav_global.css nav_category.css
jser.css
app.css
Compiled!

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;
}

48. www.ca-girlstalk.jp/category_new

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;
}

58. @extend
ｴｸｽﾃﾝﾄﾞかわいいよｴｸｽﾃﾝﾄﾞ(´Д｀；)(;´Д｀)ﾊｧﾊｧ

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

69. compass-style.org

70. $ gem install compass

71. CSS Sprite

72. CSS Sprite

73. CSS Sprite

74. ico_category.png

75. ico_category_v2.png

76. ico_category_v3.png

77. ico_category_v4.png

78. ico_category_v5.png

79. ico_category_v6.png

80. ／(^o^)＼

81. CSS Sprite Compass

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); }
}
}

87. categories-s99406a96f7.png
/files/img/sprites/categories/*.png

88. Styleguide

89. Not “Create Page” ,
But “Create System”.
Jina Bolton @jina 02, August, 2012

90. twitter.github.com/bootstrap/

91. github.com/jacobrask/styledocco

92. $ npm install -fg styledocco

94. 成果とまとめ

95. Released!
2012.08.09

96. ガールズトークの改善が早くて感心
藤田晋 @susumu_fujita 19, August, 2012

97. 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

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