事例：

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

アメーバ事業本部 コミュニティ部門 第3コミュニティ事業部 Webディベロッパー 石本 光司2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」

@t32k

デザインから考えるハイパフォーマンスWebサイト

Webパフォーマンス最適化のためのコーディング手法 心理学から考えるWebパフォーマンス

t32k.github.com/speed/

今日のながれ- 私のバックグラウンド

- Sass/Compassの導入・運用- 序：Syntax/@import- 破：Nesting/@mixin/@extend- 急：Compass/Styleguide

- 成果とまとめ

私のバックグラウンド

2012.06.01

2012.06.01

Eコマース

大規模

レガシー

PCサイト

Web Director?

大規模サイトにおけるGoogleアナリティクス導入から成果まで ¦ CSS Nite LP, Disk 19

アクセス解析あきたわー (・ 石・)Koji Ishimoto @t32k 9, April, 2012

コミュニティ・ゲーム

小・中規模

エッジ

スマホアプリ

Web Developer!

Measuring｠Web Perf.｠-｠自己満足で終わらないためのパフォーマンス計測｠- ¦ CSS Nite LP, Disk 23

俺いちからやり直すわー (・ 石・)Koji Ishimoto @t32k 1, June, 2012

Start a web develop

Sass/Compassの導入・運用

2012.06.04Assign

2012.08.09Release!

2012.06.01Join

2012.06.04Assign

2012.08.09Release!

2ヶ月2012.06.01

Join

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

UI Designer

JavaScript

HTML/CSS

Producer

iOS/AndroidEngineer

System Engineer

System Engineer

System Engineer

Speed!

Page Speed

Development Speed

(((( ;゚ д )゚)))ｱﾜﾜﾜﾜ

Youknow me ?

github.com/enja-oss/Sass

github.com/enja-oss/Sass

日本語おｋ

�introduction

$ gem install sass

Syntax

.scss Sassy CSS

.sass Indented Syntax

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

output.css

#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}

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

LoveSassyCSS

@import

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

box-modal.css header.css

list.cssmypage.cssnav_global.css nav_category.css

jser.css

box-modal.css header.css

list.cssmypage.cssnav_global.css nav_category.css

jser.css

app.cssCompiled!

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

�development

Sass is powerful and dangerous.

Jon Rohan @johnrohan 05, December, 2012

Nesting

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

www.ca-girlstalk.jp/category_new

／(^o^)＼

Sass を使おうが LESS を使おうが、カジュアルにセレクタを増やしてはいけない。セレクタは詩である。

Kokubo Kotarao @kotarok 25, February, 2012

Don’t go more than four levels deep.

@mixin/@extend

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

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

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

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

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

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

.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

／(^o^)＼

.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

However, not all semantics need to be content-derived.

Nicolas Gallagher @necolas 02, August, 2012

�climax

Compass

compass-style.org

$ gem install compass

CSS Sprite

CSS Sprite

CSS Sprite

ico_category.png

ico_category_v2.png

ico_category_v3.png

ico_category_v4.png

ico_category_v5.png

ico_category_v6.png

／(^o^)＼

CSS Sprite Compass

Generate Image

Generate Code (Calculate background-position)

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

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

categories-s99406a96f7.png

/files/img/sprites/categories/*.png

Styleguide

Not “Create Page” ,But “Create System”.

Jina Bolton @jina 02, August, 2012

twitter.github.com/bootstrap/

github.com/jacobrask/styledocco

$ npm install -fg styledocco

成果とまとめ

Released!2012.08.09

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

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 PageviewsP

V

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 PageviewsP

V 4000万PV

俺やったったわー (・ 石・)Koji Ishimoto @t32k 12, January, 2013

Baby Steps

I think CSS is awesome!But it could be even better.

Nicole Sullivan @stubbornella 09, November, 2009

Try & Error

Sass doesn't create bad code. Bad coders do.

Roy Tomeji @roy 02, February, 2012

smacss.com

ちゃんとCSSを書け！Yuya Saito @cssradar 15, October, 2012

Thank you!

t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop