• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
compassで簡単!  CSS3を手軽に利用する
 

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

on

  • 7,527 views

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

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

Statistics

Views

Total Views
7,527
Views on SlideShare
4,060
Embed Views
3,467

Actions

Likes
13
Downloads
7
Comments
1

23 Embeds 3,467

http://colopl.co.jp 2911
http://css-eblog.com 337
http://feeds2.feedburner.com 100
http://stg-cms.colopl.co.jp 60
http://cms.colopl.co.jp 20
http://www.feedspot.com 7
http://cloud.feedly.com 5
http://apps.synaptive.net 4
http://www.colopl.co.jp 3
http://digg.com 3
http://127.0.0.35 2
http://translate.googleusercontent.com 2
https://si0.twimg.com 2
http://www.newsblur.com 2
http://feeds.feedburner.com 1
https://twimg0-a.akamaihd.net 1
http://feedly.com 1
http://feedproxy.google.com 1
http://www.twylah.com 1
http://reader.aol.com 1
https://twitter.com 1
http://www.hanrss.com 1
http://www.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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を手軽に利用する compassで簡単! CSS3を手軽に利用する Presentation Transcript

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