Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

compassで簡単! CSS3を手軽に利用する

8,653 views

Published on

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

Published in: Technology, Education
  • please reply in my private box(joy.andrew28@yahoo.com)

    Hello

    Iam joy andrew a good looking girl i am humble and cool
    above all i am loving and caring i have gone through your profile
    treuly it is quite intresting to me i will like to have a good relationship
    with you so kindly get incontact
    with me through this address (joy.andrew28@yahoo.com)
    so that i can tell you more about myself and also give you my picture hope to hear from you soon joy
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

compassで簡単! CSS3を手軽に利用する

  1. 1.      で簡単! CSS3を手軽に利用する2012.07.10 KAYAC HTMLファイ部 比留間 和也
  2. 2. 自己紹介
  3. 3. 自己紹介• 面白法人カヤック HTMLファイ部 所属 比留間 和也• 最近はJavaScriptメイ ンで開発しています。
  4. 4. compassとは?
  5. 5. の前に
  6. 6. Sassとは?
  7. 7. Sassの主なメリット• CSSで変数が使える• extendが使える• 構造をネストで表現できる• mixinを使って記述をまとめられる
  8. 8. For example...
  9. 9. Variables
  10. 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. 11. Nesting
  12. 12. table.hl { margin: 2em 0; td.ln { text-align: right; }}li { font: { family: serif; weight: bold; size: 1.2em; }}
  13. 13. Mixins
  14. 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. 15. Extend
  16. 16. .box-animal { width: 150px; background-color: #ffc;}.box-dog{ @extend .box-animal; border: solid 1px #999; border-radius: 2px;}
  17. 17. 改めてcompassとは?
  18. 18. Sass界のjQuery
  19. 19. compassでできること• 様々なmixinが標準で用意されている• 画像に対する処理が充実• プロジェクト内で設定を共通化できる
  20. 20. 設定・導入
  21. 21. Install
  22. 22. $ gem update --system$ gem install compass
  23. 23. create
  24. 24. $ compass create myproject
  25. 25. config.rbの編集
  26. 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. 27. compassのmixin
  28. 28. for CSS3
  29. 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. 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. 31. 主要なところはおさえてあ る
  32. 32. 手軽さをライブコーディング してみます!
  33. 33. 今回のサンプルは以下で公開しているので、 よかったら参考にしてみてください。 http://goo.gl/F1zbG
  34. 34. [PR]
  35. 35. jsdo.itがscss, less, さらにJSXとCoffeeScript に対応! http://goo.gl/Mq0Hh
  36. 36. ご清聴ありがとうございました

×