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

事例：
パフォーマンスから考える
Sass/Compass 導入・運用
アメーバ事業本部コミュニティ部門第3コミュニティ事業部
Webディベロッパー石本光司
2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」

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

今日のながれ
- 私のバックグラウンド
- Sass/Compassの導入・運用
- 序：Syntax/@import
- 破：Nesting/@mixin/@extend
- 急：Compass/Styleguide
- 成果とまとめ

私のバックグラウンド

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

Sass/Compassの
導入・運用

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

2012.06.04
Assign
2012.08.09
Release!
2012.06.01
Join

2012.06.04
Assign
2012.08.09
Release!
2ヶ月
2012.06.01
Join

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

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

((((;ﾟдﾟ))))ｱﾜﾜﾜﾜ

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

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

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.css
Compiled!

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

Don’t go more than four levels deep.

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 {
}
.mixinB {
}
.mixinC {
}

extend.cssextend.scss
.boxshadow {
}
.extendA {
@extend .boxshadow;
}
.extendB {
@extend .boxshadow;
}
.extendC {
@extend .boxshadow;
}
.boxshadow, .extendA,
.extendB, .extendC {
}

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 {
}
.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 {
}
.extendA {
@extend %boxshadow;
}
.extendB {
@extend %boxshadow;
}
.extendC {
@extend %boxshadow;
}
.extendA, .extendB, .extendC {
}

@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

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
/ﬁles/img/sprites/categories/*.png

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

github.com/jacobrask/styledocco

ガールズトークの改善が早くて感心
藤田晋 @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 Pageviews
PV

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

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

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

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

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

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

More Related Content

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