Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
事例:
パフォーマンスから考える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
- 成果とまとめ
Web Director?
大規模サイトにおけるGoogleアナリティクス導入から成果まで ¦ CSS Nite LP, Disk 19
Web Developer!
Measuring⦆Web Perf.⦆-⦆自己満足で終わらないためのパフォーマンス計測⦆- ¦ CSS Nite LP, Disk 23
UI Designer
JavaScript
HTML/CSS
Producer
iOS/AndroidEngineer
System Engineer
System Engineer
System Engineer
Youknow me ?
github.com/enja-oss/Sass
github.com/enja-oss/Sass
日本語おk
.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;}
t32k.github.com/speed/rtt/AvoidCssImport.html
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
Sass is powerful and dangerous.
Jon Rohan @johnrohan 05, December, 2012
.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
Sass を使おうが LESS を使おうが、カジュアルにセレクタを増やしてはいけない。セレクタは詩である。
Kokubo Kotarao @kotarok 25, February, 2012
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
.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
compass-style.org
// 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); } }}
Not “Create Page” ,But “Create System”.
Jina Bolton @jina 02, August, 2012
twitter.github.com/bootstrap/
github.com/jacobrask/styledocco
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
I think CSS is awesome!But it could be even better.
Nicole Sullivan @stubbornella 09, November, 2009
Sass doesn't create bad code. Bad coders do.
Roy Tomeji @roy 02, February, 2012
smacss.com
Thank you!
[email protected]'s latte, Sass. | Flickr by yukop