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.
【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回
Ticklecode
Yoshinori Kobayashi1
驚愕!compass が便利すぎる!
使ってみて便利すぎたcompasのtips集
2
生まれは 奈良県 です
小林由憲(こばやしよしのり)
Twitter:
TickleCodeブログ:
@yoshiii514
もくもく会(自主勉強会)
を複数の運営メンバーや
アドバイザーの方々と
ともに、定期開催しています。
勉強会を開催しています)^o^(
3
【CoEdo.rb】
Ruby / Ruby on Rails
ビギナーズ勉強会
Swiftビギナーズ勉...
4
驚愕!compass を Railsに導入
5
http://sass-lang.com/
Sass(サス)
驚愕!compass を Railsに導入
変数、ループなどが使えるcss出力するため
の拡張言語。
compassはSassのライブラリの1つ。
6
http://compass-style.org/
compass(コンパス) Sassでできたライブラリ群
よく使うものをあらかじめ便利に
使えるように用意してくれている。
驚愕!compass を Railsに導入
7
https://github.com/Compass/compass-rails
compass-rails
驚愕!compass を Railsに導入
8
驚愕!compass が便利すぎる Tips集
9
[css]
#box-shadow{
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px...
10
[css]
opacity50{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
IEの個別対応も自動で出力。
[scss]
opac...
11
[css]
.clearfix{
overflow: hidden;
*zoom: 1;
}
clearfixのmix-inもある。
[scss]
.clearfix{
@include clearfix;
}
驚愕!compass が便...
12
[css]
#width-duration-easein {
-moz-transition-property: width;
-o-transition-property: width;
-webkit-transition-prope...
13
.example address, .example article, ・・・(block要素){
border: 1px solid #777777;
margin: 1em 3em;
}
.example a, .example sp...
14
[css]
.box {
background: url('../img/icon-s04ddddb84.png') 0 -100px no-repeat;
height: 50px;
width: 70px;
}
red.png gre...
15
驚愕!まとめ:compassを使うとどうなるのか!
16
Chrome、Firefox、IEとか
どうでもよくなる!
compassが各ブラウザのcssを自動生成してくれるので、ブラウザ
のテストとかしなくてもだいたい綺麗に表示される。
最近は、あまりテストもしないし、ブラウザの種別も意識しなく...
17
CSS3などの記述が短く書けるし、自動生成されるの
で、記述ミスがなくテストしなくてもそこそこ動く。
コーディングが
とんでもなく早くなる!
驚愕!まとめ:compassを使うとどうなるのか!
18
Compassで楽々スプライト|sass|study|kanapple.net
Web制作者のためのSassの教科書 - 公式サポートサイト
Compass Home | Compass Documentation
驚愕!参考資料やサイト...
19
今後の問い合わせ先
何かございましたら、
ご連絡ください(・∀・)
Twitter: @yoshiii514
Facebook: Yoshinori.Koba
Mail: info@ticklecode.com
最後に
20
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

驚愕!compass が便利すぎる!(使ってみて便利すぎたcompasのtips集)|【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回

1,945 views

Published on

2015年9月26日に開催された、「【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回」での発表資料です。
https://coedo-rails.doorkeeper.jp/events/27725

ショートセッション(10分程度)で発表しました。

もう、Sassやcompassを使っている人も増えてきていると思います。

最近は、Sassとcompassで完全にコーディングしているため、整理もかねてcompassについてまとめてみました。

ベンダープレフィックス、IEの個別対応、CSS3の複雑な記述もシンプルに、スプライト画像とCSSの生成について書いてみました。

各種ブラウザを意識してCSSを書かなくてよいことはとても快適で助かっています。

また、難解なCSS3の記述も簡単にかけるためかなりコーディングも早くなりました(・∀・)

Sass+compassはおすすめです!

=================

「Ruby / Ruby on Rails ビギナーズ勉強会」は初心者が集まって発表したり、自主学習する勉強会です。定期開催しています。

★開催の連絡は以下の方法で受け取ることができます。

## DoorKeeperグループ
イベント申し込みを受け付けている、DoorKeeper でのグループです。
https://coedo-rails.doorkeeper.jp/

## Facebookグループ:
イベント告知や技術情報をお互いにシェアしています。
https://www.facebook.com/groups/rorbeginners/

## Twitterハッシュタグ
ハッシュタグは、 #coedorb です。
Twitterにもイベント、勉強会の情報を流しています。

★勉強会で発表されたスライド、動画をまとめています。
Ruby / Ruby on Rails ビギナーズ勉強会 スライド・動画 #coedorb
http://matome.naver.jp/odai/2143761931840509901

★勉強会を動画収録しています。

## Ustreamで勉強会を中継しています。
http://www.ustream.tv/channel/ruby-ruby-on-rails-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E5%80%B6%E6%A5%BD%E9%83%A8

## Youtubeでセッションを動画収録しています。
https://www.youtube.com/playlist?list=PL2ojdc4KhtHniIyIUx3AdO621ydzz5zpP

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

驚愕!compass が便利すぎる!(使ってみて便利すぎたcompasのtips集)|【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回

  1. 1. 【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会 第7回 Ticklecode Yoshinori Kobayashi1 驚愕!compass が便利すぎる! 使ってみて便利すぎたcompasのtips集
  2. 2. 2 生まれは 奈良県 です 小林由憲(こばやしよしのり) Twitter: TickleCodeブログ: @yoshiii514
  3. 3. もくもく会(自主勉強会) を複数の運営メンバーや アドバイザーの方々と ともに、定期開催しています。 勉強会を開催しています)^o^( 3 【CoEdo.rb】 Ruby / Ruby on Rails ビギナーズ勉強会 Swiftビギナーズ勉強会 WordPressもくもく 勉強会 http://wp-moku.doorkeeper.jp/ https://swift-beginners.doorkeeper.jp/ https://coedo-rails.doorkeeper.jp/ 自己紹介
  4. 4. 4 驚愕!compass を Railsに導入
  5. 5. 5 http://sass-lang.com/ Sass(サス) 驚愕!compass を Railsに導入 変数、ループなどが使えるcss出力するため の拡張言語。 compassはSassのライブラリの1つ。
  6. 6. 6 http://compass-style.org/ compass(コンパス) Sassでできたライブラリ群 よく使うものをあらかじめ便利に 使えるように用意してくれている。 驚愕!compass を Railsに導入
  7. 7. 7 https://github.com/Compass/compass-rails compass-rails 驚愕!compass を Railsに導入
  8. 8. 8 驚愕!compass が便利すぎる Tips集
  9. 9. 9 [css] #box-shadow{ -moz-box-shadow: red 2px 2px 10px; -webkit-box-shadow: red 2px 2px 10px; box-shadow: red 2px 2px 10px; } ベンダープレフィックスを自動生成してくれる。 [scss] #box-shadow{ @include box-shadow(red 2px 2px 10px); } 驚愕!compass が便利すぎる Tips集
  10. 10. 10 [css] opacity50{ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } IEの個別対応も自動で出力。 [scss] opacity50{ @include opacity(0.5); } 驚愕!compass が便利すぎる Tips集
  11. 11. 11 [css] .clearfix{ overflow: hidden; *zoom: 1; } clearfixのmix-inもある。 [scss] .clearfix{ @include clearfix; } 驚愕!compass が便利すぎる Tips集
  12. 12. 12 [css] #width-duration-easein { -moz-transition-property: width; -o-transition-property: width; -webkit-transition-property: width; transition-property: width; -moz-transition-duration: 2s; -o-transition-duration: 2s; -webkit-transition-duration: 2s; transition-duration: 2s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } CSS3の複雑な記述もシンプルに書ける。 [scss] #width-duration-easein { @include transition-property(width); @include transition-duration(2s); @include transition-timing-function(ease-in); } 驚愕!compass が便利すぎる Tips集
  13. 13. 13 .example address, .example article, ・・・(block要素){ border: 1px solid #777777; margin: 1em 3em; } .example a, .example span , ・・・(inline要素){ color: #cc0000; } block要素、inline要素を指定できる。 example { #{elements-of-type(block)} { border: 1px solid #777777; margin: 1em 3em; } #{elements-of-type(inline)} { color: #cc0000; } } 驚愕!compass が便利すぎる Tips集
  14. 14. 14 [css] .box { background: url('../img/icon-s04ddddb84.png') 0 -100px no-repeat; height: 50px; width: 70px; } red.png green.png blue.png icon-s04ddddb84.png スプライト画像とCSSの生成! [scss] $icon: sprite-map("icon/*.png", $spacing:30px, $position: 0%, $layout: horizontal); .box{ background:sprite($icon, red); @include sprite-dimensions($icon, red); } 驚愕!compass が便利すぎる Tips集
  15. 15. 15 驚愕!まとめ:compassを使うとどうなるのか!
  16. 16. 16 Chrome、Firefox、IEとか どうでもよくなる! compassが各ブラウザのcssを自動生成してくれるので、ブラウザ のテストとかしなくてもだいたい綺麗に表示される。 最近は、あまりテストもしないし、ブラウザの種別も意識しなくて よくなった。 驚愕!まとめ:compassを使うとどうなるのか!
  17. 17. 17 CSS3などの記述が短く書けるし、自動生成されるの で、記述ミスがなくテストしなくてもそこそこ動く。 コーディングが とんでもなく早くなる! 驚愕!まとめ:compassを使うとどうなるのか!
  18. 18. 18 Compassで楽々スプライト|sass|study|kanapple.net Web制作者のためのSassの教科書 - 公式サポートサイト Compass Home | Compass Documentation 驚愕!参考資料やサイトのまとめ
  19. 19. 19 今後の問い合わせ先 何かございましたら、 ご連絡ください(・∀・) Twitter: @yoshiii514 Facebook: Yoshinori.Koba Mail: info@ticklecode.com 最後に
  20. 20. 20 ご清聴ありがとうございました。

×