1. sass とは？

2. css
を
便利に書ける
かも？

3. 何が必要？

4. SCOUT をインストールするだけ！
http://mhs.github.com/scout-app/

5. 使い方は…
→プロジェクトフォルダを指定
・変換前のフォルダを指定 (sass)
・変換後のフォルダを指定 (css)

6. 本題

7. sass で 出来ること
変数、継承、
計算、読み込み

8. 例

9. セレクタの入れ子
sass css
.parent { .parent {
margin: 10px; margin: 10px;
line-height: 1.4em; line-height: 1.4em;
}
.child {
color: #fff; .parent .child {
} color: #fff;
}t }

10. 変数
sass css
$x: 100px;
p {
p { height: 100px;
height: $x; }
}
.variable {
.variable { width: 100px;
width: $x; }
}

11. 継承
sass css
.extend { .extend {
color: red; color: red;
margin-top: 10px; margin-top: 10px;
font-size: 1.2em; }
}
h2 {
h2 { color: red;
@extend .extend; margin-top: 10px;
height: 100px; height: 100px;
} }

12. 計算 ( 数式 )
sass css
$x: 100px;
.calc { .calc {
height: $x + 150; height: 250px;
} }

13. 計算 ( 色 )
sass css
a {
$link-color: #666;
color: #666666;
a { }
color: $link-color;
}
a:hover {
a:hover { color: #cacaca;
color: $link-color + 100;
}
}
a:visited { a:visited {
color: mix($link-color, #ff0000, 30%);
} color: #d11e1e;
}

14. 読み込み
sass css
.clearfix {
@import "compass"; overflow: hidden;
*zoom: 1;
.clearfix { }
@include clearfix;
} .kadomaru {
-webkit-border-radius: 50px;
.kadomaru { -moz-border-radius: 50px;
@include border-radius(50px); -ms-border-radius: 50px;
} -o-border-radius: 50px;
border-radius: 50px;
}

15. ・ global-reset
・css3 の各種ベンダープリフィックス
なども一発で書き出し出来ます

16. 他にも色んな機能が満載だけど

17. 後は ggrks ってことで

18. ご静聴ありがとうございました！