第16回　岡山Ruby, Ruby on Rails勉強会での発表資料

1. Sassでちょっと楽しよう
第16回 岡山Ruby, Ruby on Rails勉強会
逸見 誠(@mako_wis)

2. 自己紹介
• 逸見 誠(へんみ まこと)
• Twitter:@mako_wis
• 株式会社クレオフーガ
• iPhoneアプリ開発担当マークアッパー(初心者)
• Jave、C#、Objective-C、Ruby
• 好きなGem:sass-rails

3. 最近のお仕事はマークアップ

4. ひたすらhamlとSassの日々

5. 案外、楽しい

6. なので今回のスライドには
Ruby出てきません

7. 今日はSassの発表します

8. Sass使ってますか？

9. Sassとは？
• CSS Preprocessorの中のひとつ
• CSSの弱い部分を補うためCSSをベースに機能
を拡張したもの
• コンパイルをすることでCSSファイルに変換さ
れる

10. SASS？SCSS？

11. SASS記法とSCSS記法
• SassにはSASS記法（拡張子を.sass）と
SCSS記法（拡張子を.scss）の違いがある
• 元々の記法→SASS記法
• コーディングが簡略化
• CSSに近い記法→SCSS記法
• CSSの書き方そのままでも書ける

12. SASS記法
h2
color: black
.sub_title
font-size: smaller
color: #808080
a
font-size: smaller

13. SCSS記法
h2 {
color: black;
.sub_title {
font-size: smaller;
color: #808080;
}
!
a {
font-size: smaller;
}
}

14. 個人的にはSCSS記法推し

15. 最悪、CSS記法でかける！

16. というわけで本題

17. Sassでちょっと楽しましょう

18. こんな悩みありませんか？

19. 同じクラス名等を何回も
書かないといけない
// CSS
p.title {
color:#000;
}
!
p.title span.sub_title {
font-size: smaller;
color: #808080;
}
!
p.title .hoge {
・・・
}

20. そんな時はネスト

21. ネストしたスタイル
// SCSS
p.title {
color:#000;
span.sub_title {
font-size: smaller;
color: #808080;
}
}
!
// CSS
p.title {
color:#000;
}
!
p.title span.sub_title {
font-size: smaller;
color: #808080;
}

22. まだ悩みありませんか？

23. 同じカラーコードを
何回も書かないといけない
!
// CSS
h1 {
font-size: 16px;
color: #9B111E;
border-bottom: solid 1px #9B111E;
}
h2 {
border-bottom: solid 1px #9B111E;
}
h3 {
border-bottom: solid 1px #9B111E;
}

24. そんな時は変数

25. 変数
// SCSS
$foo-font-size : 16px;
$foo-line : 1px;
$foo-color : #9B111E;
$foo-border : solid $foo-line $foo-color;
!
h1 {
font-size: $foo-font-size;
color: $foo-color;
border-bottom: $foo-border;
}
!
h2 {
border-bottom: $foo-border;
}
!
// CSS
h1 {
font-size: 16px;
color: #9B111E;
border-bottom: solid 1px #9B111E;
}
h2 {
border-bottom: solid 1px #9B111E;
}

26. まだありますよね？

27. 幅の計算がめんどくさい
40px
940px
300px ? px
hoge fuga

28. そんな時は計算しよう

29. 幅の計算
// SCSS
$hogefuga-width: 940px;
$hoge-width: 300px;
$foge-fuga-margin:40px;
!
.fuga {
width: $hogefuga-width - $hoge-width - $foge-fuga-margin;
}
!
// CSS
.fuga {
width: 600px;
}
!
// ※細かいスタイルは省略してます。

30. まだまだありますよね？

31. 同じ構成のスタイルを
何回も書かないといけない
!
// CSS
div.hoge {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
div.huga {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-ms-border-radius: 0.5em;
border-radius: 0.5em;
}

32. そんな時にmixin

33. mixin
// SCSS
@mixin border-radius($size:0.5em) { // デフォルト値を設定可
-moz-border-radius: $size;
-webkit-border-radius: $size;
-ms-border-radius: $size;
border-radius: $size;
}
!
div.hoge {
@include border-radius(5px);
}
div.huga {
@include border-radius;
}
!
// CSS
div.hoge {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
div.huga {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-ms-border-radius: 0.5em;
border-radius: 0.5em;
}

34. 他にもできることはあるけど

35. とりあえずは

36. 使えるところから使ってみる

37. しんどくなったら意味ない

38. Sassでちょっと楽しよう

39. おわり