COLOPL FrontNightで登壇した際の資料です。compassを使ってCSS3を手軽に使う方法を紹介しています。

1. で簡単!
CSS3を手軽に利用する
2012.07.10 KAYAC HTMLファイ部 比留間 和也

2. 自己紹介

3. 自己紹介
• 面白法人カヤック
HTMLファイ部 所属
比留間 和也
• 最近はJavaScriptメイ
ンで開発しています。

4. compassとは？

5. の前に

6. Sassとは？

7. Sassの主なメリット
• CSSで変数が使える
• extendが使える
• 構造をネストで表現できる
• mixinを使って記述をまとめられる

8. For example...

9. Variables

10. $blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

11. Nesting

12. table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

13. Mixins

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

15. Extend

16. .box-animal {
width: 150px;
background-color: #ffc;
}
.box-dog{
@extend .box-animal;
border: solid 1px #999;
border-radius: 2px;
}

17. 改めて
compassとは？

18. Sass界のjQuery

19. compassでできること
• 様々なmixinが標準で用意されている
• 画像に対する処理が充実
• プロジェクト内で設定を共通化できる

20. 設定・導入

21. Install

22. $ gem update --system
$ gem install compass

23. create

24. $ compass create myproject

25. config.rbの編集

26. # Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass

27. compassのmixin

28. for CSS3

29. • Appearance Clip • Transition
• BackgroundOrigin
• Background Size
• Background
• Border Radius
• Box Shadow
• Box Sizing
• Box
• Columns
• FilterFace
• Font
• Hyphenation
• Images
• Inline Block
• Opacity
• CSS Regions
• Text Shadow
• Transform

30. • Appearance Clip • Transition
• BackgroundOrigin
• Background Size
• Background
• Border Radius
• Box Shadow
• Box Sizing
• Box
• Columns
• FilterFace
• Font
• Hyphenation
• Images
• Inline Block
• Opacity
• CSS Regions
• Text Shadow
• Transform

31. 主要なところはおさえてあ
る

32. 手軽さをライブコーディング
してみます！

33. 今回のサンプルは以下で公開しているので、
よかったら参考にしてみてください。
http://goo.gl/F1zbG

34. [PR]

35. jsdo.itがscss, less, さ
らにJSXとCoffeeScript
に対応！
http://goo.gl/Mq0Hh

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