WCAN mini Markup vol.12のLTの資料です。

1. Sass+Compassの
ココが好き
2012年11月19日 WCAN mini Markup vol.12
まほし 多川貴郎

2. 自己紹介 その1
• 多川 貴郎
• タガワ タカオ
• 31歳
• 既婚
• フリーランス

3. 自己紹介 その2
• 屋号：まほし
• 2011年6月2日開業
• 開業して約1年5ヶ月

4. 自己紹介 その3
• 主にHTML、CSS、JS、PHPを担当する私
• 主にデザイン、HTML、CSSを担当する妻
• の2人で活動

5. 自己紹介 その4
• Twitter:
• @dounokouno
• Facebook:
• https://www.facebook.com/dounokouno
• Blog:
• http://dounokouno.com/

6. 少しだけ作ったものを
紹介させてください！

7. 作ったもの その1
• Web制作小物ツール
• http://webtools.dounokouno.com/
• ダミーテキストジェネレータ
• パスワードジェネレータ
• Basic認証コードジェネレータ等

8. 作ったもの その2
• 部首検索
• http://etc.dounokouno.com/bushu-search/
• Ajaxで
• 複数個の漢字の部首を
• 一覧で表示

9. 作ったもの その3
• TransmitMail
• https://github.com/dounokouno/TransmitMail
• PHPのメールフォーム
• Copyright表示不要
• MITライセンス
• MOONGIFT様のご紹介いただいてプチブレイク

10. 本題

11. SassやLESS
使ってますか？

12. 私はSassを
使っています

13. 私がSassを
使い始めた理由は

14. Ruby on Railsの案件
にアサインされたから

15. まだSassを使い始めて
2案件目の私が

16. Sass+Compassの
個人的に好きなところを
ご紹介します

17. Sass+Compassの
ココが好き
• @mixin
• @extend
• CSS Sprite

18. 念のため
SassとCompassの説明

19. Sassとは
• CSSのプリプロセッサ
• CSSの拡張メタ言語
• http://sass-lang.com/
• 以下略

20. Compassとは
• Sassのライブラリ群（？）
• http://compass-style.org/
• 以下略

21. それぞれの詳細や
インストール方法は
ググってください！

22. 好きなところ その1
@mixin

23. /* Sass(SCSS) */
.button {
@include border-radius(3px);
}
/* Generated CSS */
.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

24. 好きなところ その2
@include

25. /* Sass(SCSS) */
h1 {
margin: ...;
padding: ...;
color: ...;
font-size: ...;
background: ...;
}
h2 {
@extend h1;
font-size: 14px;
}

26. /* Generated CSS */
h1, h2 {
margin: ...;
padding: ...;
color: ...;
font-size: ...;
background: ...;
}
h2 {
font-size: 14px;
}

27. 好きなところ その3
CSS Sprite

28. /* Sass(SCSS) */
@import "compass";
@import "icons/*.png";
.icon-external {
@include icons-sprite(external, 1);
}
.icon-mailto {
@include icons-sprite(mailto, 1);
}
/* ※display: inline-block;は省略しています */

29. /* Generated CSS */
.icons-sprite, .icon-external, .icon-mailto {
background:
url('../img/icons-s3e910d70cf.png')
no-repeat;
}
.icon-external {
background-position: 0 -10px;
height: 10px;
width: 10px;
}
.icon-mailto {
background-position: 0 0;
height: 10px;
width: 13px;
}

30. あなたが思う
Sass+Compass
の好きなところを
教えてください！

31. ご清聴ありがとう
ございました