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

8,000
-1

Published on

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

Published in: Technology, Education
1 Comment
13 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
8,000
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
9
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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. ご清聴ありがとうございました
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×